Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -22,9 +22,9 @@ export default function LandingPage() {
       borderRadius="soft"
       contentWidth="mediumSmall"
       sizing="largeSizeMediumTitles"
-      background="grid"
+      background="none"
-      cardStyle="soft-shadow"
+      cardStyle="glass-depth"
-      primaryButtonStyle="double-inset"
+      primaryButtonStyle="radial-glow"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
@@ -47,7 +47,7 @@ export default function LandingPage() {
         <HeroBillboard
           title="Where Automotive History Comes Alive"
           description="Explore rare, iconic vehicles from every era. Discover the engineering, design, and stories that shaped the road."
-          background={{ variant: "plain" }}
+          background={{ variant: "radial-gradient" }}
           tag="Premier Destination"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
@@ -56,8 +56,8 @@ export default function LandingPage() {
             { text: "Learn More", href: "#collections" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-5309.jpg"
+          videoSrc="https://videos.pexels.com/video-files/3769127/3769127-hd_1280_720_30fps.mp4"
-          imageAlt="Stunning collection of classic and modern automobiles in museum gallery"
+          videoAriaLabel="Premium automotive museum showcase with luxury vehicles"
           mediaAnimation="slide-up"
         />
       </div>

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #e3deea;;
+  /* --background: #0a0a0a;;
-  --card: #ffffff;;
+  --card: #1a1a1a;;
-  --foreground: #1f2027;;
+  --foreground: #ffffffe6;;
-  --primary-cta: #1f2027;;
+  --primary-cta: #e6e6e6;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1a1a1a;;
-  --accent: #627dc6;;
+  --accent: #737373;;
-  --background-accent: #627dc6;; */
+  --background-accent: #737373;; */
 
-  --background: #e3deea;;
+  --background: #0a0a0a;;
-  --card: #ffffff;;
+  --card: #1a1a1a;;
-  --foreground: #1f2027;;
+  --foreground: #ffffffe6;;
-  --primary-cta: #1f2027;;
+  --primary-cta: #e6e6e6;;
   --primary-cta-text: #e3deea;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1a1a1a;;
   --secondary-cta-text: #1f2027;;
-  --accent: #627dc6;;
+  --accent: #737373;;
-  --background-accent: #627dc6;;
+  --background-accent: #737373;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);