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/active-view/report/section-foreign-sciences.svelte

@@ -97,18 +97,18 @@ unit even when the section spans many races.
 	.grid-section h2 {
 		margin: 0 0 0.5rem;
 		font-size: 1.05rem;
-		color: #e8eaf6;
+		color: var(--color-text);
 	}
 	.race-header {
 		margin: 0.75rem 0 0.3rem;
 		font-size: 0.85rem;
-		color: #aab;
+		color: var(--color-text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
 	.status {
 		margin: 0;
-		color: #888;
+		color: var(--color-text-muted);
 		font-size: 0.9rem;
 	}
 	.grid {
@@ -121,15 +121,15 @@ unit even when the section spans many races.
 	.grid td {
 		padding: 0.4rem 0.6rem;
 		text-align: left;
-		border-bottom: 1px solid #1c2240;
+		border-bottom: 1px solid var(--color-border-subtle);
 	}
 	.grid th {
-		color: #aab;
+		color: var(--color-text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		font-size: 0.75rem;
 	}
 	.grid tbody tr:hover {
-		background: #11172a;
+		background: var(--color-surface);
 	}
 </style>