adds color themeing support to the site

src/app/hero/hero.component.scss

@@ -32,7 +32,7 @@
   position: absolute;
   inset: 0;
   z-index: 1;
-  background: $sky-gradient;
+  background: var(--sky-gradient);
   opacity: 0.85;
 }
 
@@ -105,10 +105,25 @@
 }
 
 .btn-hero-primary {
-  @include button-style($accent-orange, $neutral-white, $accent-orange-dark);
-  font-size: 1.1rem;
+  background: var(--color-accent);
+  color: var(--color-white);
+  border: none;
+  border-radius: $radius-md;
   padding: $spacing-sm $spacing-xl;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background $transition-fast, transform $transition-fast;
   letter-spacing: 0.03em;
+
+  &:hover {
+    background: var(--color-accent-dark);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
 }
 
 .btn-hero-secondary {
@@ -139,7 +154,7 @@
   width: 10px;
   height: 10px;
   border-radius: $radius-full;
-  background: $success-green;
+  background: var(--color-success);
   animation: pulse 2s ease-in-out infinite;
 }