style: audit phase 5 — real typography, design tokens, AA contrast

Typography:
- The codebase contained exactly one font-family declaration
  (LoadingIndicator), naming 'Cinzel Decorative' and 'Trajan Pro' — neither
  loaded, bundled, or present in static/. So every word on the site, in every
  component, rendered in the browser's default serif. For a site whose whole
  premise is atmosphere, that was the largest craft gap.
- Now a display/body pairing: self-hosted Cinzel Variable for the name,
  headings, welcome title and tooltip titles; a system stack for body and UI
  copy, which costs nothing to load and is far more legible than Times at the
  13-14px the modal and stats panel use.
- @fontsource-variable/cinzel ships two subsets with unicode-range, so only
  the 25.3KB latin file is fetched for this content (verified — latin-ext is
  emitted but never requested). font-display: swap, so text never blocks.

Contrast (WCAG 1.4.3):
- Measured every grey against the panel background (#1a1a2e) rather than
  eyeballing it. #666 is 2.97:1 and fails AA for normal text; it was used for
  the modal close glyph, the tooltip hint, the branch count and the skill
  years. Replaced with --text-subtle (#9a9aa8, 6.1:1).
- Correction to the audit: #888 was listed as failing. It measures 4.81:1 and
  passes. Tokenised for consistency, not because it was broken.
  --text-muted (#a8a8b8) is 7.3:1, not the ~9:1 I claimed.

Tokens:
- z-index was nine ad-hoc literals across seven files, with LoadingIndicator
  and the modal backdrop both on 1000. Now a named scale, and no raw z-index
  literal survives anywhere in src/ (verified against the live stylesheet).
- Added spacing, radius, motion and type tokens alongside the existing colour
  ones, so the system covers more than colour.

Note: package-lock.json in this commit also carries pre-existing churn from
before this work; adding the font dependency entangled the two.

Verified in the production build: Cinzel loads and applies to headings,
computed body font resolves to system-ui, one font file fetched, zero raw
z-index literals in the rendered CSS.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app.css

@@ -11,7 +11,61 @@
 	--bg-space: #05050a;
 	--panel-from: #1a1a2e;
 	--panel-to: #0f0f1a;
+
+	/*
+	 * Text colours, with measured contrast against --panel-from (#1a1a2e):
+	 *   --text-primary  14.0:1
+	 *   --text-muted     7.3:1
+	 *   --text-subtle    6.1:1
+	 * The previous #666 used for hints, counts and the modal close glyph was
+	 * 2.97:1 — below the 4.5:1 AA threshold for normal text.
+	 */
+	--text-primary: #e8e8f0;
 	--text-muted: #a8a8b8;
+	--text-subtle: #9a9aa8;
+
+	/*
+	 * Type. Cinzel is a Trajan-style inscriptional face — display sizes only;
+	 * body copy stays on the system stack, which costs nothing to load and is
+	 * far more legible at 13-14px. Before this, the single font-family
+	 * declaration in the codebase named two fonts that were never loaded, so
+	 * every word rendered in the browser's default serif.
+	 */
+	--font-display: 'Cinzel Variable', 'Cinzel', 'Trajan Pro', Georgia, serif;
+	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+	/* Spacing scale */
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.5rem;
+	--space-6: 2rem;
+
+	/* Radii */
+	--radius-sm: 6px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-pill: 999px;
+
+	/*
+	 * Layering. These were ad-hoc literals scattered across seven files, with
+	 * LoadingIndicator and the modal backdrop both sitting on 1000.
+	 */
+	--z-welcome: 100;
+	--z-tooltip: 500;
+	--z-panel-backdrop: 899;
+	--z-panel: 900;
+	--z-panel-toggle: 950;
+	--z-modal: 1000;
+	--z-toast: 1100;
+	--z-tree-nav: 1200;
+	--z-skip-link: 2000;
+
+	/* Motion */
+	--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
+	--duration-fast: 0.15s;
+	--duration-base: 0.3s;
 }
 
 *,
@@ -26,6 +80,8 @@ html,
 body {
 	width: 100%;
 	height: 100%;
+	font-family: var(--font-body);
+	color: var(--text-primary);
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
@@ -73,7 +129,7 @@ body {
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 2000;
+	z-index: var(--z-skip-link);
 	width: auto;
 	height: auto;
 	max-width: min(90vw, 60rem);
@@ -97,6 +153,8 @@ body {
 .sr-only:focus-within h1,
 .sr-only:focus-within h2,
 .sr-only:focus-within h3 {
+	font-family: var(--font-display);
+	letter-spacing: 0.02em;
 	color: var(--color-gold);
 	margin: 1rem 0 0.5rem;
 }
@@ -145,6 +203,8 @@ html:has(.sr-only.revealed) body {
 .sr-only.revealed h1,
 .sr-only.revealed h2,
 .sr-only.revealed h3 {
+	font-family: var(--font-display);
+	letter-spacing: 0.02em;
 	color: var(--color-gold);
 	margin: 1.25rem 0 0.5rem;
 }