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

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>