feat(ui): migrate all view bodies to design tokens (F1b)

Tokenize every remaining component <style> — calculator, order tab,
inspectors, tables, report sections, lobby, auth, mail, battle viewer,
toasts, map overlays. A scripted pass handled the unambiguous core
palette (text/bg/surface/border/accent/danger/muted), the rest were
mapped to the semantic/grey tokens by role.

Remaining colour literals are the documented exceptions only: the
battle-scene SVG data-visualisation palette (fixed dark, like the WebGL
map canvas), overlay scrims (modal / map-canvas), and directional or
deliberate drop shadows. The default theme stays dark until light
coherence is signed off across the views.

Updates ui/docs/design-system.md (migration status + exceptions).

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

ui/frontend/src/lib/battle-player/playback-controls.svelte

@@ -119,8 +119,8 @@ nowhere to go and step-forward when the timeline is at its end.
 		align-items: center;
 		gap: 0.4rem;
 		padding: 0.5rem 0.75rem;
-		background: #131934;
-		border: 1px solid #1e264a;
+		background: var(--color-surface);
+		border: 1px solid var(--color-border-subtle);
 		border-radius: 4px;
 	}
 	.spacer {
@@ -128,9 +128,9 @@ nowhere to go and step-forward when the timeline is at its end.
 	}
 	button {
 		appearance: none;
-		background: #1f2748;
-		color: #d6dcf2;
-		border: 1px solid #2c3568;
+		background: var(--color-surface-raised);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
 		padding: 0.35rem 0.7rem;
 		border-radius: 3px;
 		cursor: pointer;
@@ -139,7 +139,7 @@ nowhere to go and step-forward when the timeline is at its end.
 		min-width: 2.5rem;
 	}
 	button:hover:not(:disabled) {
-		background: #2a3463;
+		background: var(--color-surface-hover);
 	}
 	button:disabled {
 		opacity: 0.4;
@@ -150,6 +150,6 @@ nowhere to go and step-forward when the timeline is at its end.
 		font-variant-numeric: tabular-nums;
 	}
 	.log-toggle.active {
-		background: #2a3463;
+		background: var(--color-surface-hover);
 	}
 </style>