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/map-toggles.svelte

@@ -238,13 +238,13 @@ bottom-tabs bar.
 		font-size: 1.4rem;
 		padding: 0.25rem 0.5rem;
 		background: rgba(20, 24, 42, 0.85);
-		color: #e8eaf6;
-		border: 1px solid #2a3150;
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
 		border-radius: 6px;
 		cursor: pointer;
 	}
 	.trigger:hover {
-		background: #1c2238;
+		background: var(--color-surface-hover);
 	}
 	.surface {
 		position: absolute;
@@ -254,11 +254,11 @@ bottom-tabs bar.
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		background: #14182a;
-		color: #e8eaf6;
-		border: 1px solid #2a3150;
+		background: var(--color-surface-overlay);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
 		border-radius: 6px;
-		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+		box-shadow: var(--shadow-lg);
 		padding: 0.5rem;
 		z-index: 50;
 	}
@@ -274,7 +274,7 @@ bottom-tabs bar.
 		font-size: 0.75rem;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #aab;
+		color: var(--color-text-muted);
 		padding: 0 0 0.15rem 0;
 	}
 	label {
@@ -287,11 +287,11 @@ bottom-tabs bar.
 		cursor: pointer;
 	}
 	label:hover {
-		background: #1c2238;
+		background: var(--color-surface-hover);
 	}
 	input[type="checkbox"],
 	input[type="radio"] {
-		accent-color: #6dd2ff;
+		accent-color: var(--color-accent);
 	}
 	.wrap-row {
 		display: flex;
@@ -301,7 +301,7 @@ bottom-tabs bar.
 		font-size: 0.9rem;
 	}
 	.wrap-label {
-		color: #aab;
+		color: var(--color-text-muted);
 		font-size: 0.75rem;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;