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

src/components/layouts/AuthenticatedLayout.tsx

@@ -3,11 +3,13 @@ import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/navigation/AppSidebar";
 import { TopBar } from "@/components/navigation/TopBar";
 import ApiDevTools from "@/components/dev/ApiDevTools";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 
 export default function AuthenticatedLayout() {
   return (
     <SidebarProvider>
-      <div className="min-h-screen flex w-full bg-background">
+      <ThemeIndicator />
+      <div className="min-h-screen flex w-full bg-background pt-8">
         <AppSidebar />
         <div className="flex-1 flex flex-col min-w-0">
           <TopBar />

src/components/layouts/MarketingLayout.tsx

@@ -1,16 +1,17 @@
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { SecuirdLogo as GatehouseLogo } from "@/components/branding/SecuirdLogo";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 import { Button } from "@/components/ui/button";
 import { config } from "@/config";
 import { cn } from "@/lib/utils";
 import {
-Shield,
-Key,
-CreditCard,
-Play,
-Lock,
-Menu,
-X
+  Shield,
+  Key,
+  CreditCard,
+  Play,
+  Lock,
+  Menu,
+  X
 } from "lucide-react";
 import { useState } from "react";
 
@@ -29,8 +30,11 @@ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
 return (
 <div className="min-h-screen bg-background flex flex-col">
+  {/* Theme indicator banner for dev/staging */}
+  <ThemeIndicator />
+  
   {/* Header */}
-  <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <header className="sticky top-8 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 marketing-header">
     <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <div className="flex h-16 items-center justify-between">
         {/* Logo */}

src/components/layouts/PublicLayout.tsx

@@ -1,15 +1,19 @@
 import { Outlet, Link } from "react-router-dom";
 import { SecuirdLogo } from "@/components/branding/SecuirdLogo";
+import { ThemeIndicator } from "@/components/branding/ThemeIndicator";
 import { config } from "@/config";
 
 export default function PublicLayout() {
   return (
     <div className="min-h-screen bg-background flex flex-col">
+      {/* Theme indicator banner for dev/staging */}
+      <ThemeIndicator />
+      
       {/* Subtle gradient background */}
       <div className="fixed inset-0 bg-gradient-to-br from-background via-background to-secondary/30 pointer-events-none" />
       
-      {/* Header */}
-      <header className="relative z-10 w-full py-6 px-4">
+      {/* Header with theme-colored border */}
+      <header className="relative z-10 w-full py-6 px-4 marketing-header">
         <div className="max-w-md mx-auto">
           <Link to="/" className="flex items-center gap-2.5 justify-center">
             <SecuirdLogo size="md" />