feat: add environment-based CSS theming with configurable colors and branding

src/components/layouts/MarketingLayout.tsx

@@ -1,6 +1,7 @@
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { SecuirdLogo as GatehouseLogo } from "@/components/branding/SecuirdLogo";
 import { Button } from "@/components/ui/button";
+import { config } from "@/config";
 import { cn } from "@/lib/utils";
 import {
 Shield,
@@ -35,7 +36,7 @@ return (
         {/* Logo */}
         <Link to="/" className="flex items-center gap-2.5">
           <GatehouseLogo size="md" />
-          <span className="text-xl font-semibold text-foreground tracking-tight">Secuird</span>
+          <span className="text-xl font-semibold text-foreground tracking-tight">{config.app.name}</span>
         </Link>
 
         {/* Desktop Navigation */}
@@ -130,7 +131,7 @@ return (
         <div className="col-span-2 lg:col-span-1">
           <Link to="/" className="flex items-center gap-2.5">
             <GatehouseLogo size="sm" />
-            <span className="text-lg font-semibold text-foreground tracking-tight">Secuird</span>
+            <span className="text-lg font-semibold text-foreground tracking-tight">{config.app.name}</span>
           </Link>
           <p className="mt-4 text-sm text-muted-foreground max-w-xs">
             Enterprise identity and access management. Secure by design, simple by choice.

src/components/layouts/MfaEnforcementLayout.tsx

@@ -4,6 +4,7 @@ import { Shield, Smartphone, Fingerprint, AlertTriangle, CheckCircle, Loader2 }
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useAuth } from '@/contexts/AuthContext';
+import { config } from '@/config';
 import { AddPasskeyWizard } from '@/components/security/AddPasskeyWizard';
 import { TotpEnrollmentWizard } from '@/components/security/TotpEnrollmentWizard';
 import { api } from '@/lib/api';
@@ -98,7 +99,7 @@ export default function MfaEnforcementLayout() {
       <header className="h-14 border-b border-border bg-card flex items-center justify-between px-4 flex-shrink-0">
         <div className="flex items-center gap-3">
           <Shield className="w-5 h-5 text-primary" />
-          <span className="font-semibold text-foreground">Secuird</span>
+          <span className="font-semibold text-foreground">{config.app.name}</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-sm text-muted-foreground">

src/components/layouts/PublicLayout.tsx

@@ -1,5 +1,6 @@
 import { Outlet, Link } from "react-router-dom";
 import { SecuirdLogo } from "@/components/branding/SecuirdLogo";
+import { config } from "@/config";
 
 export default function PublicLayout() {
   return (
@@ -12,7 +13,7 @@ export default function PublicLayout() {
         <div className="max-w-md mx-auto">
           <Link to="/" className="flex items-center gap-2.5 justify-center">
             <SecuirdLogo size="md" />
-            <span className="text-xl font-semibold text-foreground tracking-tight">Secuird</span>
+            <span className="text-xl font-semibold text-foreground tracking-tight">{config.app.name}</span>
           </Link>
         </div>
       </header>
@@ -28,7 +29,7 @@ export default function PublicLayout() {
       <footer className="relative z-10 py-6 px-4">
         <div className="max-w-md mx-auto text-center">
           <p className="text-sm text-muted-foreground">
-            © {new Date().getFullYear()} Secuird. Identity & Access.
+            © {new Date().getFullYear()} {config.app.name}. Identity & Access.
           </p>
         </div>
       </footer>

src/components/navigation/AppSidebar.tsx

@@ -23,6 +23,7 @@ import { SecuirdLogo } from "@/components/branding/SecuirdLogo";
 import { NavLink } from "@/components/NavLink";
 import { useAuth } from "@/contexts/AuthContext";
 import { useOrg } from "@/contexts/OrgContext";
+import { config } from "@/config";
 import {
   Sidebar,
   SidebarContent,
@@ -104,7 +105,7 @@ export function AppSidebar() {
           <SecuirdLogo size="sm" variant="light" />
           {!collapsed && (
             <span className="text-lg font-semibold text-sidebar-foreground tracking-tight">
-              Secuird
+              {config.app.name}
             </span>
           )}
         </div>
@@ -221,7 +222,7 @@ export function AppSidebar() {
       <SidebarFooter className="p-4 border-t border-sidebar-border">
         {!collapsed && (
           <div className="text-xs text-sidebar-muted">
-            {import.meta.env.VITE_APP_VERSION ?? 'Secuird'}
+            {import.meta.env.VITE_APP_VERSION ?? config.app.name}
           </div>
         )}
       </SidebarFooter>