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/routes/__debug/map/+page.svelte

@@ -168,15 +168,15 @@
 		height: 100vh;
 		margin: 0;
 		font-family: system-ui, sans-serif;
-		color: #e8eaf6;
-		background: #0a0e1a;
+		color: var(--color-text);
+		background: var(--color-bg);
 	}
 	header {
 		padding: 0.5rem 1rem;
 		display: flex;
 		gap: 1rem;
 		align-items: center;
-		border-bottom: 1px solid #20253a;
+		border-bottom: 1px solid var(--color-border-subtle);
 	}
 	h1 {
 		margin: 0;
@@ -190,15 +190,15 @@
 	}
 	button {
 		padding: 0.25rem 0.75rem;
-		background: #1c2238;
-		color: #e8eaf6;
-		border: 1px solid #2a3150;
+		background: var(--color-surface-hover);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
 		border-radius: 4px;
 		cursor: pointer;
 		font: inherit;
 	}
 	button:hover {
-		background: #232b48;
+		background: var(--color-surface-hover);
 	}
 	.canvas-wrap {
 		flex: 1;
@@ -212,7 +212,7 @@
 	}
 	.error {
 		padding: 0.5rem 1rem;
-		background: #4a1820;
-		color: #ffb4b4;
+		background: var(--color-danger-subtle);
+		color: var(--color-danger);
 	}
 </style>

ui/frontend/src/routes/lobby/+page.svelte

@@ -526,9 +526,9 @@
 		flex-direction: column;
 		gap: 0.25rem;
 		padding: 0.75rem;
-		border: 1px solid #ccc;
+		border: 1px solid var(--color-border);
 		border-radius: 0.4rem;
-		background: #fafafa;
+		background: var(--color-surface-raised);
 		text-align: left;
 		font: inherit;
 		cursor: pointer;
@@ -537,8 +537,8 @@
 
 	button.card:disabled {
 		cursor: not-allowed;
-		color: #777;
-		background: #f0f0f0;
+		color: var(--color-text-faint);
+		background: var(--color-surface);
 	}
 
 	li.card {
@@ -546,7 +546,7 @@
 	}
 
 	.meta {
-		color: #555;
+		color: var(--color-text-muted);
 		font-size: 0.9rem;
 	}
 
@@ -554,7 +554,7 @@
 		align-self: flex-start;
 		padding: 0.1rem 0.5rem;
 		border-radius: 999px;
-		background: #e7e7e7;
+		background: var(--color-surface-raised);
 		font-size: 0.8rem;
 	}
 
@@ -587,9 +587,9 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.4rem 0.75rem;
-		border: 1px dashed #888;
+		border: 1px dashed var(--color-text-muted);
 		border-radius: 0.4rem;
-		background: #f7f7f7;
+		background: var(--color-surface-raised);
 		cursor: pointer;
 		font: inherit;
 	}

ui/frontend/src/routes/lobby/create/+page.svelte

@@ -263,7 +263,7 @@
 	}
 
 	details {
-		border: 1px solid #ddd;
+		border: 1px solid var(--color-border);
 		border-radius: 0.4rem;
 		padding: 0.5rem 0.75rem;
 		display: flex;
@@ -287,6 +287,6 @@
 	}
 
 	small {
-		color: #666;
+		color: var(--color-text-muted);
 	}
 </style>

ui/frontend/src/routes/login/+page.svelte

@@ -351,6 +351,6 @@
 
 	[role="alert"] {
 		margin-top: 1rem;
-		color: #b00020;
+		color: var(--color-danger);
 	}
 </style>