fix: correct @theme inline, apply amber palette, and add light mode (GAB-44)

Fixes circular self-references in @theme block (must be @theme inline in
Tailwind v4 so utilities emit var() references at runtime). Swaps the
pink/neon palette for amber/warm, adds light mode via
prefers-color-scheme, removes dead glow utility classes, and cleans up
component color tokens to drop the now-gone --color-secondary and
--color-tertiary. Deletes stitch/grid-view.html design reference.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: celias

dashboard/src/components/AlertCard.tsx

@@ -176,7 +176,7 @@ export default function AlertCard({ alert, onSelect }: AlertCardProps) {
               style={{
                 fontFamily: "Space Grotesk, sans-serif",
                 fontSize: "0.7rem",
-                color: "var(--color-tertiary)",
+                color: "var(--color-primary)",
                 fontWeight: 600,
               }}
             >
@@ -207,7 +207,7 @@ export default function AlertCard({ alert, onSelect }: AlertCardProps) {
             style={{
               fontFamily: "Space Grotesk, sans-serif",
               fontSize: "0.65rem",
-              color: "var(--color-secondary)",
+              color: "var(--color-on-surface-muted)",
               marginBottom: "0.35rem",
             }}
           >

dashboard/src/components/AlertDetail.tsx

@@ -182,16 +182,9 @@ export default function AlertDetail({ alert, weights }: AlertDetailProps) {
           rel="noopener noreferrer"
           className="text-xs underline transition-all"
           style={{
-            color: "var(--color-secondary)",
+            color: "var(--color-primary)",
             fontFamily: "Space Grotesk, sans-serif",
           }}
-          onMouseEnter={(e) => {
-            (e.target as HTMLElement).style.textShadow =
-              "0 0 8px var(--color-secondary)";
-          }}
-          onMouseLeave={(e) => {
-            (e.target as HTMLElement).style.textShadow = "none";
-          }}
         >
           View on Reddit →
         </a>

dashboard/src/components/AlertRow.tsx

@@ -110,9 +110,9 @@ export default function AlertRow({
             className="text-xs px-2 py-0.5 shrink-0"
             style={{
               fontFamily: "Space Grotesk, sans-serif",
-              background: "var(--color-secondary-container)",
-              color: "var(--color-secondary)",
-              border: "1px solid rgba(0, 255, 204, 0.4)",
+              background: "var(--color-primary-container)",
+              color: "var(--color-primary)",
+              border: "1px solid var(--color-outline)",
               borderRadius: "4px",
             }}
           >

dashboard/src/components/Header.tsx

@@ -15,7 +15,7 @@ export default function Header({
     <header className="flex items-center justify-between mb-6">
       <div className="flex items-center gap-3">
         <h1
-          className="text-2xl font-bold tracking-tight glow-pink"
+          className="text-2xl font-bold tracking-tight"
           style={{
             fontFamily: "Sora, sans-serif",
             color: "var(--color-primary)",
@@ -26,7 +26,7 @@ export default function Header({
         <span
           className="inline-block w-2.5 h-2.5 rounded-full transition-colors"
           style={{
-            background: connected ? "var(--color-secondary)" : "#ff4444",
+            background: connected ? "var(--color-primary)" : "#b91c1c",
           }}
           title={connected ? "Connected" : "Disconnected"}
         />

dashboard/src/components/NavBar.tsx

@@ -293,11 +293,8 @@ export default function NavBar({
               width: 8,
               height: 8,
               borderRadius: "50%",
-              background: connected ? "var(--color-secondary)" : "#ff4444",
+              background: connected ? "var(--color-primary)" : "#b91c1c",
               display: "inline-block",
-              boxShadow: connected
-                ? "0 0 6px var(--color-secondary)"
-                : "0 0 6px #ff4444",
             }}
             title={connected ? "Connected" : "Disconnected"}
           />

dashboard/src/index.css

@@ -1,44 +1,60 @@
 @import "tailwindcss";
 
-:root {
-  --color-bg: #0a0a12;
-  --color-surface: #0f0f1a;
-  --color-surface-container: #141422;
-  --color-surface-container-high: #1e1e30;
-  --color-surface-container-highest: #28283e;
-  --color-primary: #ff2d78;
-  --color-primary-container: #b3004e;
-  --color-secondary: #00ffcc;
-  --color-secondary-container: #004d3d;
-  --color-tertiary: #ffe04a;
-  --color-on-surface: #e8e0f0;
-  --color-on-surface-muted: #a098b0;
-  --color-outline: #5a5068;
-  --color-outline-variant: #302840;
+@theme inline {
+  --color-bg: var(--color-bg);
+  --color-surface: var(--color-surface);
+  --color-surface-container: var(--color-surface-container);
+  --color-surface-container-high: var(--color-surface-container-high);
+  --color-surface-container-highest: var(--color-surface-container-highest);
+  --color-primary: var(--color-primary);
+  --color-primary-container: var(--color-primary-container);
+  --color-on-surface: var(--color-on-surface);
+  --color-on-surface-muted: var(--color-on-surface-muted);
+  --color-outline: var(--color-outline);
+  --color-outline-variant: var(--color-outline-variant);
 }
 
-body {
-  background: var(--color-bg);
-  color: var(--color-on-surface);
-  font-family: Inter, sans-serif;
-  min-height: 100vh;
-}
+/* ── Dark mode (default) ─────────────────────────────── */
+:root {
+  --color-bg:                        #111110;
+  --color-surface:                   #1a1916;
+  --color-surface-container:         #211f1c;
+  --color-surface-container-high:    #2b2925;
+  --color-surface-container-highest: #363330;
 
-/* Neon glow utilities */
-.glow-pink {
-  text-shadow: 0 0 8px var(--color-primary);
-}
+  --color-primary:                   #d97706;
+  --color-primary-container:         #292008;
 
-.glow-border-pink {
-  border-color: rgba(255, 45, 120, 0.5);
-  box-shadow: inset 0 0 12px rgba(255, 45, 120, 0.1);
+  --color-on-surface:                #e8e3d8;
+  --color-on-surface-muted:          #8a8070;
+
+  --color-outline:                   #48433c;
+  --color-outline-variant:           #2e2b26;
 }
 
-.glow-box-pink {
-  box-shadow: 0 0 16px rgba(255, 45, 120, 0.4);
+/* ── Light mode ──────────────────────────────────────── */
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg:                        #f5f2ec;
+    --color-surface:                   #faf8f4;
+    --color-surface-container:         #ede9e1;
+    --color-surface-container-high:    #e2ddd4;
+    --color-surface-container-highest: #d4cec4;
+
+    --color-primary:                   #b45309;
+    --color-primary-container:         #fef3c7;
+
+    --color-on-surface:                #1c1a16;
+    --color-on-surface-muted:          #6b6355;
+
+    --color-outline:                   #b0a898;
+    --color-outline-variant:           #d4cfc8;
+  }
 }
 
-.glow-border-pink-full {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 12px rgba(255, 45, 120, 0.25);
+body {
+  background: var(--color-bg);
+  color: var(--color-on-surface);
+  font-family: Inter, sans-serif;
+  min-height: 100vh;
 }