Phase 24: Design System v2 — analytics-style UI (0.30.0)

- New /api/dashboard/funnel (5-stage stack health, 30s TTL cache) and
  /api/dashboard/summary (containers, daily uptime jsonl, ops activity)
- Token system (tokens.css + Tailwind sp-* aliases); legacy bg/card/accent
  remapped onto the tokens; Schibsted Grotesk bundled via fontsource
- TopNav pill navigation + AppShell replace the sidebar layout (off-canvas
  drawer below 1024px); central display-weight page titles
- Dashboard redesign: FunnelChart (gradient/hatch SVG waterfall), container
  count card with per-host bars + Insights chip, UptimeChart, OpsGrid,
  AiPromptBar; 30/7-day range selector; host sections retained below
- Stacks page honours ?q= / ?filter= deep links + new status-filter select

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/tailwind.config.ts

@@ -6,9 +6,36 @@ export default {
   theme: {
     extend: {
       colors: {
-        bg: { DEFAULT: "#f8fafc", dark: "#0f172a" },
-        card: { DEFAULT: "#ffffff", dark: "#1e293b" },
-        accent: { DEFAULT: "#0284c7", dark: "#38bdf8" },
+        // Legacy aliases now resolve to the v2 tokens so every existing
+        // page picks up the new palette without per-file edits. The CSS
+        // variables themselves flip under `.dark`, so the `-dark` variants
+        // point at the same vars.
+        bg: { DEFAULT: "var(--sp-bg)", dark: "var(--sp-bg)" },
+        card: { DEFAULT: "var(--sp-surface)", dark: "var(--sp-surface)" },
+        accent: {
+          DEFAULT: "rgb(var(--sp-blue-rgb) / <alpha-value>)",
+          dark: "rgb(var(--sp-blue-rgb) / <alpha-value>)",
+        },
+        // Design System v2 tokens
+        "sp-bg": "var(--sp-bg)",
+        "sp-surface": "var(--sp-surface)",
+        "sp-surface-2": "var(--sp-surface-2)",
+        "sp-border": "var(--sp-border-color)",
+        "sp-text-1": "var(--sp-text-1)",
+        "sp-text-2": "var(--sp-text-2)",
+        "sp-text-3": "var(--sp-text-3)",
+        "sp-blue": "var(--sp-blue)",
+        "sp-blue-light": "var(--sp-blue-light)",
+        "sp-green": "var(--sp-green)",
+        "sp-pink": "var(--sp-pink)",
+        "sp-amber": "rgb(var(--sp-amber-rgb) / <alpha-value>)",
+        "sp-pill": "var(--sp-pill-bg)",
+        "sp-pill-text": "var(--sp-pill-text)",
+      },
+      borderRadius: {
+        card: "var(--sp-r-card)",
+        pill: "var(--sp-r-pill)",
+        chip: "var(--sp-r-chip)",
       },
     },
   },