feat(ui): cozy polish — primitives, motion, empty states

Adds 7 reusable primitives in src/lib/components/ui/ and migrates ~70 hand-rolled
call sites across forms, admin panels, and routes. Tokens unchanged — same Cozy
Home palette, just consistently applied.

Primitives
- Switch: pill toggle, role=switch, terracotta track, cubic-bezier knob
- Button: 5 variants × 4 sizes, press-squash, loading spinner, buttonClass()
  helper for <a> link-as-CTA cases
- Checkbox: rounded square with animated check-draw + indeterminate
- Select: native <select> with Cozy chevron + matched radius
- Slider: gradient track, terracotta-bordered knob, aria-valuetext
- Input + Field: documented in CLAUDE.md for future use
- 9 buttonClass unit tests

Migrations
- 23 <input type=checkbox> → <Switch> (boolean settings)
- 5 multi-select checkboxes → <Checkbox> (DiscoveryPanel, sys-stats metrics)
- ~28 <select> → <Select>
- 17 <input type=range> → <Slider> (ThemeCustomizer's hue picker kept custom)
- ~25 hand-rolled buttons → <Button> / buttonClass()

Surface polish
- Admin section wrappers: rounded-lg → rounded-[1.4rem] + shadow-soft
  (resolves the Phase-5 tradeoff from the Cozy migration memo)
- BoardPropertiesPanel: live theme preview swatch showing computed hsl() on a
  sample button; hue/sat use Slider; bg/cardSize use Select
- AppHealthBadge: role=status + aria-live=polite; .status-degraded (slow
  amber breathing) and .status-offline (single attention flash) now applied
- AppForm collapse triggers: rotating chevron + aria-expanded
- Empty states for /boards and /apps: inline SVGs using --room-* tokens
  (peach/sky/sage/butter) instead of generic Lucide icons
- Login Remember Me: showcase Switch (first-impression surface)

Motion (src/app.css)
- New cozy-rise / cozy-rise-stagger for staggered grid reveals (/boards, /apps)
- New cozy-expand for accordion sections (healthcheck, integration, wallpaper)
- All motion respects prefers-reduced-motion

CLAUDE.md
- New project guide with a mandatory Frontend reuse table — every primitive
  documented with "never use raw <input type=checkbox>/<select>/<range>" and
  "do not repeat rounded-xl bg-primary px-4 py-2 ..." rules

Verification
- npm run check: 0 errors, 0 warnings, 5831 files
- npm test: 301 passing
- npm run lint: 0 errors (19 pre-existing warnings unchanged)
- npm run build: ✔ done

Branch is feat/cozy-polish, ready to PR against master.

src/routes/admin/groups/+page.svelte

@@ -3,6 +3,8 @@
 	import type { PageData } from './$types.js';
 	import GroupTable from '$lib/components/admin/GroupTable.svelte';
 	import { superForm } from 'sveltekit-superforms/client';
+	import Switch from '$lib/components/ui/Switch.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 
 	let { data }: { data: PageData } = $props();
 
@@ -25,17 +27,13 @@
 <div>
 	<div class="mb-6 flex items-center justify-between">
 		<h1 class="text-2xl font-bold text-card-foreground">{$t('admin.group_management')}</h1>
-		<button
-			type="button"
-			onclick={() => (showCreateForm = !showCreateForm)}
-			class="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
-		>
+		<Button onclick={() => (showCreateForm = !showCreateForm)}>
 			{showCreateForm ? $t('common.cancel') : $t('admin.create_group')}
-		</button>
+		</Button>
 	</div>
 
 	{#if showCreateForm}
-		<div class="mb-6 rounded-lg border border-border bg-card p-6">
+		<div class="mb-6 rounded-[1.4rem] border border-border bg-card p-6 shadow-[var(--shadow-soft)]">
 			<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.new_group')}</h2>
 			<form method="POST" action="?/create" use:enhance class="space-y-4">
 				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -61,26 +59,20 @@
 							class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 						/>
 					</div>
-					<div class="flex items-center gap-2">
-						<input
+					<div class="flex items-center gap-3">
+						<Switch
 							id="isDefault"
 							name="isDefault"
-							type="checkbox"
 							bind:checked={$form.isDefault}
-							class="h-4 w-4 rounded border-input"
+							ariaLabelledby="isDefaultLabel"
 						/>
-						<label for="isDefault" class="text-sm font-medium text-foreground">{$t('admin.default_group_hint')}</label>
+						<label id="isDefaultLabel" for="isDefault" class="cursor-pointer text-sm font-medium text-foreground">{$t('admin.default_group_hint')}</label>
 					</div>
 				</div>
 				{#if $errors._errors}
 					<p class="text-sm text-destructive">{$errors._errors}</p>
 				{/if}
-				<button
-					type="submit"
-					class="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-				>
-					{$t('admin.create_group')}
-				</button>
+				<Button type="submit">{$t('admin.create_group')}</Button>
 			</form>
 		</div>
 	{/if}