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/src/components/ui/ConfirmDialog.tsx

@@ -29,7 +29,7 @@ export function ConfirmDialog({
         className="w-full max-w-md rounded-xl border border-slate-200 bg-card p-5 shadow-xl dark:border-slate-700 dark:bg-card-dark"
         onClick={(e) => e.stopPropagation()}
       >
-        <h2 className="text-lg font-semibold">{title}</h2>
+        <h2 className="sp-heading text-lg">{title}</h2>
         {message && <p className="mt-2 text-sm text-slate-500">{message}</p>}
         {children && <div className="mt-3">{children}</div>}
         <div className="mt-4 flex justify-end gap-2">

frontend/src/components/ui/index.tsx

@@ -12,11 +12,7 @@ export function Card({
 }) {
   return (
     <div
-      className={cn(
-        "rounded-xl border border-slate-200 bg-card p-4 shadow-sm",
-        "dark:border-slate-700 dark:bg-card-dark",
-        className
-      )}
+      className={cn("sp-card p-4", className)}
     >
       {children}
     </div>