Repaint theme blue with larger typography

Swap the cherry-red primary for the logo's blue, bump body 13→15px
and h1 32→40px, and add semantic tokens (--bg-*, --accent-*, --text-*)
so future palette shifts are a single-file edit. Cherry-red survives
only for danger states and the brand cherry mark.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/lib/ui/styles/tokens.css

@@ -1,6 +1,7 @@
 /* Electric Cherry — design tokens.
-   Named after the perk-a-cola from Mob of the Dead (CoD Zombies):
-   deep cherry-red art-deco label + electric cyan discharge.
+   Blue-primary theme: bright saturated mid-blue from the brand mark,
+   with cherry red demoted to accent + danger. Cool-tinted dark surfaces,
+   larger typography, more generous spacing.
 
    Font @import chains live in src/lib/ui/styles/fonts.ts and are pulled
    in by +layout.svelte via JS import — Vite's CSS `@import` inlines the
@@ -8,59 +9,104 @@
    we need the JS module graph to see them. */
 
 :root {
-    /* Cherry — surfaces + primary */
-    --cherry-975: #0b0407;
-    --cherry-925: #170a0f;
-    --cherry-875: #22101a;
-    --cherry-825: #2c1420;
-    --cherry-700: #4a0f1e;
-    --cherry-600: #7a0f22;
+    /* Blue — surfaces + primary (matches logo circle) */
+    --blue-975: #060b16;
+    --blue-925: #0a1428;
+    --blue-875: #12203a;
+    --blue-825: #182b4d;
+    --blue-700: #1e3260;
+    --blue-600: #2560a8;
+    --blue-500: #2e86d1;
+    --blue-400: #4ea3e8;
+    --blue-300: #7cc0f5;
+
+    /* Spark — soft cyan accent */
+    --spark-500: #7cd4ff;
+    --spark-400: #a8e5ff;
+    --spark-glow: 0 0 8px rgba(124, 212, 255, 0.55);
+    --spark-glow-lg: 0 0 14px rgba(124, 212, 255, 0.45);
+
+    /* Cherry — retained for danger + brand-cherry accent only */
     --cherry-500: #c8102e;
     --cherry-400: #e93656;
     --cherry-300: #ff7a92;
 
-    /* Spark — electric cyan */
-    --spark-600: #14b8d0;
-    --spark-500: #22e0ff;
-    --spark-400: #7ef1ff;
-    --spark-glow: 0 0 8px rgba(34, 224, 255, 0.55);
-    --spark-glow-lg: 0 0 14px rgba(34, 224, 255, 0.45);
+    /* Neutrals — cool blue-white */
+    --cream: #eef4fb;
+    --cream-dim: #b8c8dc;
+    --ink-100: #eaf1fb;
+    --ink-300: #94a8c4;
+    --ink-500: #5a6d8a;
+    --ink-700: #2a3a55;
 
-    /* Neutrals + label */
-    --cream: #f2e6c8;
-    --cream-dim: #c9b98f;
-    --ink-100: #f5eaec;
-    --ink-300: #c8a4ac;
-    --ink-500: #7a5560;
-    --ink-700: #4a2f36;
-
-    /* State colors */
+    /* State */
     --amber-500: #ffb020;
     --amber-glow: 0 0 8px rgba(255, 176, 32, 0.4);
-    --danger-500: #ff3050;
-    --success-500: var(--spark-500);
+    --danger-500: var(--cherry-500);
+    --success-500: #4ade80;
+
+    /* Semantic aliases — components should reference THESE, not the raw ramps.
+       Swapping palette later is then a single-file edit. */
+    --bg-page: var(--blue-975);
+    --bg-nav: var(--blue-925);
+    --bg-card: var(--blue-875);
+    --bg-card-hi: var(--blue-825);
+    --border: var(--blue-700);
+    --border-hi: var(--blue-600);
+    --accent: var(--blue-500);
+    --accent-hi: var(--blue-400);
+    --accent-glow: 0 0 8px rgba(46, 134, 209, 0.5);
+    --accent-glow-lg: 0 0 14px rgba(46, 134, 209, 0.4);
 
     /* Typography */
     --font-display: 'Alfa Slab One', 'Georgia', serif;
     --font-body: 'Inter', system-ui, -apple-system, sans-serif;
     --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 
+    /* Type scale — substantial bump */
+    --text-xs: 11px;
+    --text-sm: 13px;
+    --text-base: 15px;
+    --text-md: 17px;
+    --text-lg: 20px;
+    --text-xl: 24px;
+    --text-2xl: 30px;
+    --text-3xl: 40px;
+    --text-mono: 13px;
+    --text-mono-sm: 12px;
+
+    --leading-tight: 1.2;
+    --leading-body: 1.6;
+    --leading-mono: 1.55;
+
+    --tracking-display: 2px;
+    --tracking-nav: 0.4px;
+    --tracking-label: 1px;
+
+    /* Spacing */
+    --pad-card: 20px;
+    --pad-panel: 24px;
+    --pad-nav-y: 16px;
+    --pad-nav-x: 32px;
+    --gap-section: 32px;
+    --gap-cards: 18px;
+
     /* Radii */
-    --r-sm: 3px;
-    --r-md: 6px;
-    --r-lg: 10px;
+    --r-sm: 4px;
+    --r-md: 8px;
+    --r-lg: 12px;
 
     /* Shadows */
-    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
-    --shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.4);
+    --shadow-card: 0 2px 12px rgba(6, 11, 22, 0.5);
+    --shadow-panel: 0 4px 24px rgba(6, 11, 22, 0.4);
 }
 
 @keyframes electric-pulse {
     0%, 100% {
-        box-shadow: 0 0 0 0 rgba(34, 224, 255, 0.55), var(--spark-glow);
+        box-shadow: 0 0 0 0 rgba(124, 212, 255, 0.55), var(--spark-glow);
     }
     50% {
-        box-shadow: 0 0 0 6px rgba(34, 224, 255, 0), var(--spark-glow-lg);
+        box-shadow: 0 0 0 6px rgba(124, 212, 255, 0), var(--spark-glow-lg);
     }
 }