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/lib/components/StatsPanel.svelte

@@ -179,7 +179,7 @@
 		border: 2px solid var(--color-gold);
 		border-radius: 12px;
 		cursor: pointer;
-		z-index: 950;
+		z-index: var(--z-panel-toggle);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -221,7 +221,7 @@
 		box-shadow:
 			4px 0 40px rgba(255, 215, 0, 0.3),
 			8px 0 80px rgba(255, 215, 0, 0.15);
-		z-index: 900;
+		z-index: var(--z-panel);
 		/* Offset past the box-shadow (8px offset + 80px blur) so the gold glow
 		   doesn't bleed down the left edge of the viewport while closed. */
 		transform: translateX(calc(-100% - 100px));
@@ -262,7 +262,7 @@
 		width: 100%;
 		height: 100%;
 		background: rgba(0, 0, 0, 0.5);
-		z-index: 899;
+		z-index: var(--z-panel-backdrop);
 		transition: opacity 0.2s ease;
 	}
 
@@ -305,6 +305,7 @@
 	}
 
 	.character-name {
+		font-family: var(--font-display);
 		font-size: 1.4rem;
 		font-weight: bold;
 		color: var(--color-gold);
@@ -334,6 +335,8 @@
 	}
 
 	.proficiency-summary h3 {
+		font-family: var(--font-display);
+		letter-spacing: 0.04em;
 		color: var(--color-gold);
 		font-size: 0.9rem;
 		margin-bottom: 0.75rem;
@@ -400,12 +403,12 @@
 
 	.branch-count {
 		font-size: 0.8rem;
-		color: #888;
+		color: var(--text-muted);
 	}
 
 	.expand-icon {
 		font-size: 0.8rem;
-		color: #666;
+		color: var(--text-subtle);
 		transition: transform 0.2s ease;
 	}
 
@@ -463,7 +466,7 @@
 
 	.skill-years {
 		font-size: 0.7rem;
-		color: #666;
+		color: var(--text-subtle);
 		margin-left: 0.5rem;
 	}