fix: theme colors not applying due to incorrect CSS injection method

src/index.css

@@ -12,16 +12,16 @@
 @layer base {
   :root {
     /* 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 */
+    --background: 216 22% 94%;
+    --foreground: 222 47% 9%;
 
-    --card: 0 0% 100%;                /* pure white — 6% lightness gap over bg */
+    --card: 0 0% 100%;
     --card-foreground: 222 47% 9%;
 
     --popover: 0 0% 100%;
     --popover-foreground: 222 47% 9%;
 
-    /* Primary — theme-configurable (teal default, red for dev, purple for staging) */
+    /* Primary — theme-configurable */
     --primary: var(--theme-primary);
     --primary-foreground: var(--theme-primary-foreground);
 
@@ -29,7 +29,7 @@
     --secondary: 216 20% 91%;
     --secondary-foreground: 222 47% 18%;
 
-    /* Muted — noticeably darker than secondary, used for section bg */
+    /* Muted */
     --muted: 216 18% 88%;
     --muted-foreground: 222 18% 42%;
 
@@ -51,7 +51,7 @@
     --info-foreground: 0 0% 100%;
 
     /* UI chrome */
-    --border: 216 18% 84%;            /* clearly visible on white card */
+    --border: 216 18% 84%;
     --input: 216 18% 92%;
     --ring: var(--theme-ring);
 
@@ -68,12 +68,7 @@
     --sidebar-ring: var(--theme-ring);
     --sidebar-muted: 222 20% 48%;
 
-    /* Gradients */
-    --gradient-brand: linear-gradient(135deg, hsl(var(--theme-primary)), hsl(var(--theme-primary) / 0.8));
-    --gradient-accent: linear-gradient(135deg, hsl(var(--theme-primary)), hsl(var(--theme-primary) / 0.8));
-    --gradient-subtle: linear-gradient(135deg, hsl(216 28% 97%), hsl(216 18% 93%));
-
-    /* Shadows — stronger alpha so cards lift off the bg */
+    /* Shadows */
     --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);
@@ -151,40 +146,34 @@
 }
 
 @layer components {
-  /* Theme-specific branding enhancements */
-  
-  /* Marketing header - theme colored */
-  .marketing-header {
-    @apply border-b transition-colors duration-300;
-    background-color: hsl(var(--theme-primary) / 0.03);
-    border-color: hsl(var(--theme-primary) / 0.2);
+  /* Environment banner — solid theme color */
+  .env-banner {
+    @apply fixed top-0 left-0 right-0 z-[100] px-3 py-1.5 text-center text-xs font-bold uppercase tracking-wider;
+    background-color: hsl(var(--theme-primary));
+    color: hsl(var(--theme-primary-foreground));
+    box-shadow: 0 2px 4px 0 hsl(var(--theme-primary) / 0.3);
   }
-  
-  /* Theme indicator badge */
-  .theme-badge {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
-    background-color: hsl(var(--theme-primary) / 0.15);
+
+  /* Sidebar header — solid theme color background */
+  .sidebar-header-themed {
+    background-color: hsl(var(--theme-sidebar-primary));
+    color: hsl(var(--theme-sidebar-primary-foreground));
+    border-bottom: 1px solid hsl(var(--theme-sidebar-primary) / 0.3);
+  }
+
+  /* Top bar — theme-colored bottom border + subtle tint */
+  .top-bar-themed {
+    border-bottom: 2px solid hsl(var(--theme-primary));
+    background-color: hsl(var(--theme-primary) / 0.04);
+  }
+
+  /* Active nav item — theme color background */
+  .active-nav-themed {
+    background-color: hsl(var(--theme-primary) / 0.12);
     color: hsl(var(--theme-primary));
+    border-radius: var(--radius);
   }
-  
-  /* Theme-colored sidebar header */
-  .sidebar-header-theme {
-    background: linear-gradient(135deg, 
-      hsl(var(--theme-sidebar-primary)) 0%, 
-      hsl(var(--theme-sidebar-primary) / 0.85) 100%
-    );
-  }
-  
-  /* Theme-colored buttons */
-  .btn-theme {
-    @apply bg-primary text-primary-foreground hover:opacity-90 transition-opacity;
-  }
-  
-  /* Theme ring focus */
-  .focus-ring:focus-visible {
-    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
-  }
-  
+
   /* Auth card for public pages */
   .auth-card {
     @apply bg-card rounded-xl p-8 shadow-card border border-border;
@@ -236,33 +225,9 @@
   .page-description {
     @apply text-muted-foreground mt-1;
   }
-  
-  /* Dev/Staging environment banner */
-  .env-banner {
-    @apply fixed top-0 left-0 right-0 z-50 px-3 py-1 text-center text-xs font-bold uppercase tracking-wider;
-    background: linear-gradient(90deg, 
-      hsl(var(--theme-primary)) 0%, 
-      hsl(var(--theme-primary) / 0.8) 50%, 
-      hsl(var(--theme-primary)) 100%
-    );
-    color: hsl(var(--theme-primary-foreground));
-  }
-  
-  /* Additional env indicator on page */
-  .env-indicator {
-    @apply inline-block w-2 h-2 rounded-full ml-2;
-    background-color: hsl(var(--theme-primary));
-    animation: pulse 2s ease-in-out infinite;
-  }
-  
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
 }
 
 @layer utilities {
-  /* Animation utilities */
   .animate-fade-in {
     animation: fadeIn 0.3s ease-out;
   }
@@ -272,22 +237,12 @@
   }
 
   @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 
   @keyframes slideIn {
-    from {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 }