Fix: UI Light Mode

src/index.css

@@ -11,72 +11,73 @@
 
 @layer base {
   :root {
-    /* Core palette - Deep slate with teal accent */
-    --background: 210 20% 98%;
-    --foreground: 222 47% 11%;
+    /* Core palette - Light blue-gray with teal accent */
+    --background: 216 22% 94%;        /* cool blue-gray — cards lift clearly off this */
+    --foreground: 222 47% 9%;         /* near-black navy */
 
-    --card: 0 0% 100%;
-    --card-foreground: 222 47% 11%;
+    --card: 0 0% 100%;                /* pure white — 6% lightness gap over bg */
+    --card-foreground: 222 47% 9%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222 47% 11%;
+    --popover-foreground: 222 47% 9%;
 
-    /* Primary - Deep navy for trust */
-    --primary: 222 47% 20%;
-    --primary-foreground: 210 40% 98%;
+    /* Primary — teal, fully saturated, dark enough to read on white */
+    --primary: 173 65% 36%;
+    --primary-foreground: 0 0% 100%;
 
-    /* Secondary - Soft slate */
-    --secondary: 215 20% 95%;
-    --secondary-foreground: 222 47% 20%;
+    /* Secondary — cool blue-gray, clearly darker than bg */
+    --secondary: 216 20% 91%;
+    --secondary-foreground: 222 47% 18%;
 
-    /* Muted - Subtle backgrounds */
-    --muted: 215 20% 96%;
-    --muted-foreground: 215 16% 47%;
+    /* Muted — noticeably darker than secondary, used for section bg */
+    --muted: 216 18% 88%;
+    --muted-foreground: 222 18% 42%;
 
-    /* Accent - Teal for actions and highlights */
-    --accent: 173 58% 39%;
+    /* Accent — same teal as primary */
+    --accent: 173 65% 36%;
     --accent-foreground: 0 0% 100%;
 
-    /* Semantic colors */
-    --destructive: 0 72% 51%;
+    /* Semantic */
+    --destructive: 0 72% 48%;
     --destructive-foreground: 0 0% 100%;
 
-    --success: 152 69% 31%;
+    --success: 152 60% 30%;
     --success-foreground: 0 0% 100%;
 
-    --warning: 38 92% 50%;
+    --warning: 38 90% 48%;
     --warning-foreground: 0 0% 100%;
 
-    --info: 199 89% 48%;
+    --info: 199 80% 44%;
     --info-foreground: 0 0% 100%;
 
-    /* UI elements */
-    --border: 214 32% 91%;
-    --input: 214 32% 91%;
-    --ring: 173 58% 39%;
+    /* UI chrome */
+    --border: 216 18% 84%;            /* clearly visible on white card */
+    --input: 216 18% 92%;
+    --ring: 173 65% 36%;
 
     --radius: 0.5rem;
 
-    /* Sidebar - Darker for visual hierarchy */
-    --sidebar-background: 222 47% 11%;
-    --sidebar-foreground: 215 20% 85%;
-    --sidebar-primary: 173 58% 45%;
+    /* Sidebar */
+    --sidebar-background: 222 30% 95%;
+    --sidebar-foreground: 222 47% 18%;
+    --sidebar-primary: 173 65% 36%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 222 40% 18%;
-    --sidebar-accent-foreground: 210 40% 98%;
-    --sidebar-border: 222 40% 20%;
-    --sidebar-ring: 173 58% 45%;
-    --sidebar-muted: 215 16% 55%;
+    --sidebar-accent: 216 20% 88%;
+    --sidebar-accent-foreground: 222 47% 9%;
+    --sidebar-border: 216 18% 84%;
+    --sidebar-ring: 173 65% 36%;
+    --sidebar-muted: 222 20% 48%;
 
-    /* Custom gradients and effects */
-    --gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%));
-    --gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%));
-    --gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%));
-    
-    --shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
-    --shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1);
-    --shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1);
-    --shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
+    /* Gradients */
+    --gradient-brand: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
+    --gradient-accent: linear-gradient(135deg, hsl(173 65% 36%), hsl(173 65% 28%));
+    --gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));
+
+    /* Shadows — stronger alpha so cards lift off the bg */
+    --shadow-sm: 0 1px 2px 0 hsl(222 47% 9% / 0.10);
+    --shadow-md: 0 4px 6px -1px hsl(222 47% 9% / 0.14), 0 2px 4px -2px hsl(222 47% 9% / 0.10);
+    --shadow-lg: 0 10px 15px -3px hsl(222 47% 9% / 0.14), 0 4px 6px -4px hsl(222 47% 9% / 0.10);
+    --shadow-card: 0 2px 6px 0 hsl(222 47% 9% / 0.10), 0 1px 2px -1px hsl(222 47% 9% / 0.08);
   }
 
   .dark {

src/pages/marketing/HomePage.tsx

@@ -80,14 +80,11 @@ export default function HomePage() {
 return (
   <>
     {/* Hero Section */}
-    <section className="relative overflow-hidden">
-      {/* Background gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-accent/5 pointer-events-none" />
-      
+    <section className="relative overflow-hidden bg-card">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
         <div className="text-center max-w-4xl mx-auto">
           {/* Badge */}
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-6">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6 border border-primary/20">
             <ShieldCheck className="h-4 w-4" />
             Security-first identity platform
           </div>
@@ -95,7 +92,7 @@ return (
           {/* Headline */}
           <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6">
             Enterprise Authentication,
-            <span className="text-accent block mt-2">Without the Enterprise Complexity</span>
+            <span className="text-primary block mt-2">Without the Enterprise Complexity</span>
           </h1>
 
           {/* Subheadline */}
@@ -423,13 +420,13 @@ return (
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link to="/register">
-                <Button size="lg" variant="secondary" className="gap-2">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
                   Start Free Trial
                   <ArrowRight className="h-4 w-4" />
                 </Button>
               </Link>
               <Link to="/pricing">
-                <Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
+                <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
                   View Pricing
                 </Button>
               </Link>