feat(ui): theme system — amber/slate/rose, profile picker, full token migration

- Add CSS custom property token system in app.css (@theme + [data-theme] overrides)
- Three themes: amber (default), slate (indigo/dark), rose (dark pink)
- Flash prevention via inline <script> in <svelte:head> sets data-theme before paint
- Theme context (setContext/getContext) in +layout.svelte for live preview
- Theme persisted via PocketBase user_settings (PBUserSettings.theme field)
- /api/settings GET/PUT updated to handle theme field alongside existing settings
- Profile page: new Appearance section with 3 colour-swatch theme picker
- Full token migration across all 36 route/component files:
  zinc/amber hardcoded Tailwind classes → CSS var utilities (bg-(--color-surface), etc.)
- UI primitives (Badge, Button, Card, Dialog, Separator, Textarea) migrated
- accent-amber-400 replaced with inline style accent-color: var(--color-brand)

ui/src/lib/server/pocketbase.ts

@@ -54,6 +54,7 @@ export interface PBUserSettings {
 	auto_next: boolean;
 	voice: string;
 	speed: number;
+	theme?: string;
 	updated?: string;
 }
 
@@ -778,7 +779,7 @@ export async function getSettings(
 
 export async function saveSettings(
 	sessionId: string,
-	settings: { autoNext: boolean; voice: string; speed: number },
+	settings: { autoNext: boolean; voice: string; speed: number; theme?: string },
 	userId?: string
 ): Promise<void> {
 	const existing = await listOne<PBUserSettings & { id: string }>(
@@ -793,6 +794,7 @@ export async function saveSettings(
 		speed: settings.speed,
 		updated: new Date().toISOString()
 	};
+	if (settings.theme !== undefined) payload.theme = settings.theme;
 	if (userId) payload.user_id = userId;
 
 	if (existing) {