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/mail/thread-list.svelte

@@ -95,14 +95,14 @@ here.
 		cursor: pointer;
 	}
 	.row.active .row-btn {
-		border-color: #555;
-		background: #1c1c1c;
+		border-color: var(--color-border-strong);
+		background: var(--color-surface-raised);
 	}
 	.row.has-unread .title {
 		font-weight: 700;
 	}
 	.row.standalone .title {
-		color: #b3a14c;
+		color: var(--color-warning);
 	}
 	.title {
 		grid-column: 1 / span 1;
@@ -116,12 +116,12 @@ here.
 		text-align: center;
 		font-size: 0.75rem;
 		border-radius: 999px;
-		background: #2a4d7d;
-		color: #fff;
+		background: var(--color-accent);
+		color: var(--color-accent-contrast);
 	}
 	.snippet {
 		grid-column: 1 / span 2;
-		color: #999;
+		color: var(--color-text-muted);
 		font-size: 0.85rem;
 		overflow: hidden;
 		text-overflow: ellipsis;