feat: add full @property declarations and fix theme system

- Add @property declarations for all 28 animatable color tokens ensuring
  smooth 500ms transitions between light/dark modes
- Remove invalid @theme block from inside @media (prefers-color-scheme: dark)
  that was causing Tailwind v4 to use dark values as defaults
- Add FOUC-prevention inline script in entry-server.tsx that applies
  theme class before first paint
- Integrate useTheme() hook in app.tsx for meta theme-color updates
  and system preference change listener

web/src/app.css

@@ -30,6 +30,156 @@
   initial-value: #e5e7eb;
 }
 
+@property --color-bg-tertiary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #e5e7eb;
+}
+
+@property --color-text-tertiary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #9ca3af;
+}
+
+@property --color-brand-primary {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4f46e5;
+}
+
+@property --color-brand-primary-light {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #818cf8;
+}
+
+@property --color-brand-primary-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4338ca;
+}
+
+@property --color-brand-accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #06b6d4;
+}
+
+@property --color-brand-accent-light {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #67e8f9;
+}
+
+@property --color-brand-accent-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0891b2;
+}
+
+@property --color-border-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #d1d5db;
+}
+
+@property --color-success {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #06b6d4;
+}
+
+@property --color-warning {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f59e0b;
+}
+
+@property --color-error {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ef4444;
+}
+
+@property --color-info {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4f46e5;
+}
+
+@property --color-success-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ecfeff;
+}
+
+@property --color-warning-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fffbeb;
+}
+
+@property --color-error-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fef2f2;
+}
+
+@property --color-info-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #eef2ff;
+}
+
+@property --color-amber {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f59e0b;
+}
+
+@property --color-danger {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ef4444;
+}
+
+@property --color-glass {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(255, 255, 255, 0.8);
+}
+
+@property --color-glass-dark {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(17, 24, 39, 0.8);
+}
+
+@property --gradient-card-start {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --gradient-card-end {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f3f4f6;
+}
+
+@property --color-dot-grid {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #e5e7eb;
+}
+
+@property --color-focus-ring {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4f46e5;
+}
+
 :root {
   --color-bg: #fafbfc;
   --color-bg-secondary: #f3f4f6;
@@ -170,30 +320,6 @@
     --color-focus-ring: #818cf8;
   }
 
-  @theme {
-    --color-bg: #111827;
-    --color-bg-secondary: #1f2937;
-    --color-bg-tertiary: #374151;
-
-    --color-text-primary: #f9fafb;
-    --color-text-secondary: #d1d5db;
-    --color-text-tertiary: #9ca3af;
-
-    --color-border: #374151;
-    --color-border-dark: #4b5563;
-
-    --color-success-bg: #0c4a6e;
-    --color-warning-bg: #78350f;
-    --color-error-bg: #7f1d1d;
-    --color-info-bg: #1e1b4b;
-
-    --color-glass: rgba(17, 24, 39, 0.8);
-    --color-glass-dark: rgba(17, 24, 39, 0.9);
-    --gradient-card-start: #1f2937;
-    --gradient-card-end: #0b1120;
-    --color-dot-grid: #374151;
-    --color-focus-ring: #818cf8;
-  }
 }
 
 :root.light {

web/src/app.tsx

@@ -2,9 +2,11 @@ import { MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
+import { useTheme } from "./lib/theme";
 import "./app.css";
 
 export default function App() {
+  useTheme();
   return (
     <Router
       root={props => (

web/src/entry-server.tsx

@@ -9,6 +9,9 @@ export default createHandler(() => (
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <link rel="icon" href="/favicon.ico" />
+          <script
+            innerHTML={`(function(){var t=localStorage.getItem('shieldai-theme');if(t==='light')return;if(t==='dark'){document.documentElement.classList.add('dark');return}if(window.matchMedia('(prefers-color-scheme:dark)').matches)document.documentElement.classList.add('dark')})()`}
+          />
           {assets}
         </head>
         <body>