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/section/DraggableSection.svelte

@@ -105,7 +105,7 @@
 	}
 </script>
 
-<div class="rounded-xl border border-border bg-card p-4 shadow-sm">
+<div class="rounded-xl border border-border bg-card p-4 shadow-[var(--shadow-soft)]">
 	<div class="mb-3 flex items-center justify-between">
 		<div class="flex items-center gap-2">
 			<!-- Section drag handle -->
@@ -142,7 +142,7 @@
 			<!-- Card size selector -->
 			<select
 				onchange={handleCardSizeChange}
-				class="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground transition-colors focus:border-primary focus:outline-none"
+				class="rounded-xl border border-input bg-background px-2 py-1 text-xs text-foreground transition-colors focus:border-primary focus:outline-none"
 				title={$t('board.card_size') ?? 'Card size'}
 			>
 				<option value="" selected={!section.cardSize}>{$t('section.inherit_size') ?? 'Inherit'}</option>
@@ -153,7 +153,7 @@
 			<button
 				type="button"
 				onclick={() => onToggleAddWidget(section.id)}
-				class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+				class="rounded-xl bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
 			>
 				{$t('widget.add')}
 			</button>

src/lib/components/section/Section.svelte

@@ -58,7 +58,7 @@
 	let expanded = $state(section.isExpandedByDefault);
 </script>
 
-<div class="rounded-xl border border-border bg-card/30 shadow-sm {editMode.active ? 'ring-1 ring-primary/10' : ''}">
+<div class="rounded-[1.4rem] border border-border bg-card/40 shadow-[var(--shadow-soft)] backdrop-blur-sm {editMode.active ? 'ring-1 ring-primary/15' : ''}">
 	<SectionHeader
 		sectionId={section.id}
 		title={section.title}

src/lib/components/section/SectionHeader.svelte

@@ -117,7 +117,7 @@
 				bind:value={editTitle}
 				onkeydown={handleTitleKeydown}
 				onblur={handleEditBlur}
-				class="flex-1 rounded border border-input bg-background px-2 py-0.5 text-sm font-medium text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-ring/30"
+				class="flex-1 rounded border border-input bg-background px-2 py-0.5 text-sm font-medium text-foreground focus:border-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
 			/>
 			<IconPickerButton
 				value={editIcon}
@@ -135,7 +135,7 @@
 			{#if icon}
 				<DynamicIcon name={icon} size={18} />
 			{/if}
-			<span class="font-medium text-foreground">{title}</span>
+			<span class="font-display text-lg font-semibold text-foreground">{title}</span>
 		</button>
 	{/if}