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/inspectors/planet/cargo-routes.svelte

@@ -262,7 +262,7 @@ The component is purposely deferential to the existing infrastructure:
 	.title {
 		margin: 0;
 		font-size: 0.85rem;
-		color: #aab;
+		color: var(--color-text-muted);
 		font-weight: 500;
 	}
 	.slots {
@@ -276,7 +276,7 @@ The component is purposely deferential to the existing infrastructure:
 		display: contents;
 	}
 	.slot-label {
-		color: #aab;
+		color: var(--color-text-muted);
 		font-size: 0.85rem;
 		align-self: center;
 	}
@@ -290,25 +290,25 @@ The component is purposely deferential to the existing infrastructure:
 		font-variant-numeric: tabular-nums;
 	}
 	.empty {
-		color: #888;
+		color: var(--color-text-muted);
 		font-style: italic;
 	}
 	.destination {
-		color: #e8eaf6;
+		color: var(--color-text);
 	}
 	.action {
 		font: inherit;
 		font-size: 0.8rem;
 		padding: 0.15rem 0.5rem;
 		background: transparent;
-		color: #aab;
-		border: 1px solid #2a3150;
+		color: var(--color-text-muted);
+		border: 1px solid var(--color-border);
 		border-radius: 3px;
 		cursor: pointer;
 	}
 	.action:not(:disabled):hover {
-		color: #e8eaf6;
-		border-color: #6d8cff;
+		color: var(--color-text);
+		border-color: var(--color-accent);
 	}
 	.action:disabled {
 		cursor: not-allowed;
@@ -320,19 +320,19 @@ The component is purposely deferential to the existing infrastructure:
 		align-items: center;
 		flex-wrap: wrap;
 		padding: 0.3rem 0.5rem;
-		background: rgba(255, 224, 130, 0.1);
-		border: 1px solid #ffe082;
+		background: var(--color-warning-subtle);
+		border: 1px solid var(--color-warning);
 		border-radius: 4px;
 	}
 	.pick-message {
-		color: #ffe082;
+		color: var(--color-warning);
 		font-size: 0.85rem;
 		flex: 1;
 	}
 	.no-destinations {
 		margin: 0;
 		font-size: 0.8rem;
-		color: #888;
+		color: var(--color-text-muted);
 		font-style: italic;
 	}
 </style>