feat(ui): migrate entire UI to "Cozy Home" design

Warm, friendly redesign replacing the generic cold-shadcn look. Built as a
swappable token bundle so other presets can be added later; dark mode and the
user-tunable accent hue are retained.

Foundation
- app.css: warm cream (light) + "dusk" (dark) token system; terracotta accent
  (default hue 16); pastel --room-* palette; vivid --status-* (dots/bars) plus
  AA-legible --status-*-ink (text); soft warm shadows; --radius 1rem; font tokens
- Fonts: Fraunces (display) + Figtree (body), self-hosted in static/fonts
  (no Google CDN) so offline/LAN installs work; system-ui fallbacks kept
- h1/h2/h3 render in Fraunces via base layer

Chrome and surfaces
- Sidebar, Header, home, AppCard/BoardCard, BoardHeader, sections, favorites
- 29 widgets + integration renderers: cozy card shells, room-palette charts
- Default background is a static warm "cozy" glow (mesh demoted, rAF gated on
  prefers-reduced-motion)

System-wide
- Status colors tokenized (no raw bg/text-*-500 or status hex); success/warning
  to status tokens, categorical to room palette, errors to destructive
- Inputs rounded-xl; buttons rounded-xl; cards/dialogs rounded-[1.4rem];
  soft-shadow vocabulary only; focus-visible:ring-primary/30
- Forms, admin tables (now cozy cards), dialogs, popovers, auth screens

a11y: reduced-motion guards; darker status "ink" text for AA on cream.
Known tradeoff: terracotta primary + white button text ~2.96:1 (signature color,
user-tunable).

Verified: svelte-check 0/0, build ok, 274 tests pass, eslint 0 errors.
Design refs + system sheet in design-mockups/.

src/lib/components/widget/MetricWidget.svelte

@@ -64,13 +64,13 @@
 	});
 
 	const trendColor = $derived.by(() => {
-		if (trend === 'up') return 'text-green-500';
-		if (trend === 'down') return 'text-red-500';
-		return 'text-muted-foreground';
+		if (trend === 'up') return 'var(--status-online-ink)';
+		if (trend === 'down') return 'var(--status-offline-ink)';
+		return 'var(--muted-foreground)';
 	});
 </script>
 
-<div class="flex h-full flex-col items-center justify-center rounded-xl border border-border bg-card p-4">
+<div class="flex h-full flex-col items-center justify-center rounded-[1.4rem] border border-border bg-card shadow-[var(--shadow-soft)] p-4">
 	{#if loading}
 		<div class="flex flex-col items-center gap-2">
 			<div class="h-10 w-24 animate-pulse rounded bg-muted"></div>
@@ -80,7 +80,7 @@
 		<span class="text-xs text-muted-foreground">Failed to load metric</span>
 	{:else if currentValue !== null}
 		<!-- Trend arrow -->
-		<div class="mb-1 {trendColor}">
+		<div class="mb-1" style="color: {trendColor};">
 			{#if trend === 'up'}
 				<TrendingUp class="h-5 w-5" />
 			{:else if trend === 'down'}
@@ -92,7 +92,7 @@
 
 		<!-- Big number -->
 		<div class="flex items-baseline gap-1">
-			<span class="text-4xl font-bold tabular-nums text-foreground">
+			<span class="font-display text-4xl font-semibold tabular-nums text-foreground">
 				{formatNumber(currentValue)}
 			</span>
 			{#if config.unit}