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

src/components/branding/SecuirdLogo.tsx

@@ -7,12 +7,8 @@ interface SecuirdLogoProps {
 }
 
 /**
- * Secuird Logo - Abstract gate/doorway mark
- * Represents controlled entry and policy enforcement
- * Two vertical pillars forming a gateway with negative space
- * 
- * Uses inline styles for theme colors to ensure they work correctly
- * across all theme configurations (default, dev, preprod)
+ * Secuird Logo — Abstract gate/doorway mark
+ * Uses CSS variables so the color automatically adapts to the active theme.
  */
 export function SecuirdLogo({ 
   size = "md", 
@@ -25,61 +21,38 @@ export function SecuirdLogo({
     lg: "w-12 h-12",
   };
 
-  // Use inline styles for theme colors to ensure they work at runtime
-  const getBgStyle = () => {
-    if (variant === "light") {
-      return { 
-        backgroundColor: "hsl(var(--theme-sidebar-primary, 173 65% 36%))",
-        color: "hsl(var(--theme-sidebar-primary-foreground, 0 0% 100%))"
-      };
-    }
-    return { 
-      backgroundColor: "hsl(var(--theme-primary, 173 65% 36%))",
-      color: "hsl(var(--theme-primary-foreground, 0 0% 100%))"
-    };
+  // Tailwind classes resolve to hsl(var(--primary)) / hsl(var(--sidebar-primary))
+  // which pick up the injected --theme-primary / --theme-sidebar-primary values.
+  const bgClasses = {
+    default: "bg-primary",
+    light: "bg-sidebar-primary",
   };
-  
-  const bgStyle = getBgStyle();
+
+  const iconColor = variant === "light" 
+    ? "text-sidebar-primary-foreground" 
+    : "text-primary-foreground";
 
   return (
     <div 
       className={cn(
         "rounded-lg flex items-center justify-center flex-shrink-0",
         sizeClasses[size],
+        bgClasses[variant],
         className
       )}
-      style={bgStyle}
     >
       <svg 
         viewBox="0 0 24 24" 
         fill="none" 
         className={cn(
+          iconColor,
           size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6"
         )}
-        style={{ color: bgStyle.color }}
       >
-        {/* Abstract gate - two pillars with archway */}
-        <path 
-          d="M4 4h3v16H4V4z" 
-          fill="currentColor"
-        />
-        <path 
-          d="M17 4h3v16h-3V4z" 
-          fill="currentColor"
-        />
-        <path 
-          d="M7 4h10v3H7V4z" 
-          fill="currentColor"
-          opacity="0.7"
-        />
-        {/* Keyhole/entry indicator */}
-        <circle 
-          cx="12" 
-          cy="14" 
-          r="2" 
-          fill="currentColor"
-          opacity="0.5"
-        />
+        <path d="M4 4h3v16H4V4z" fill="currentColor" />
+        <path d="M17 4h3v16h-3V4z" fill="currentColor" />
+        <path d="M7 4h10v3H7V4z" fill="currentColor" opacity="0.7" />
+        <circle cx="12" cy="14" r="2" fill="currentColor" opacity="0.5" />
       </svg>
     </div>
   );

src/components/branding/ThemeIndicator.tsx

@@ -6,37 +6,26 @@ interface ThemeIndicatorProps {
 }
 
 /**
- * Visual theme indicator - shows environment name and color
- * Appears as a banner in dev/preprod modes
+ * Visual theme indicator — solid-colored banner for dev/preprod environments.
  */
-export function ThemeIndicator({ showBanner = true, className }: ThemeIndicatorProps) {
+export function ThemeIndicator({ showBanner = true }: ThemeIndicatorProps) {
   const theme = config.theme.name;
   const appName = config.app.name;
-  
-  // Only show for non-default themes
-  if (theme === "default") {
-    return null;
-  }
-  
-  const themeLabels: Record<string, string> = {
+
+  if (theme === "default") return null;
+
+  const labels: Record<string, string> = {
     dev: "Development Environment",
     preprod: "Staging / Pre-Production",
   };
-  
-  const themeLabel = themeLabels[theme] || theme;
-  
+
   if (showBanner) {
-    return (
-      <div className="env-banner">
-        {themeLabel} — {appName}
-      </div>
-    );
+    return <div className="env-banner">{labels[theme] || theme} — {appName}</div>;
   }
-  
+
   return (
-    <span className={`theme-badge ${className || ""}`}>
-      <span className="env-indicator" />
-      {themeLabel}
+    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/15 text-primary">
+      {labels[theme] || theme}
     </span>
   );
-}
+}