feat: add visual theme indicators and fix logo colors for dev/staging environments

src/index.css

@@ -1,7 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-@import './styles/theme-vars.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -153,6 +151,40 @@
 }
 
 @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);
+  }
+  
+  /* 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);
+    color: hsl(var(--theme-primary));
+  }
+  
+  /* 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;
@@ -204,6 +236,29 @@
   .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 {