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/routes/+layout.server.ts

@@ -13,14 +13,15 @@ export const load: LayoutServerLoad = async ({ locals, url }) => {
 		redirect(302, `/login`);
 	}
 
-	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0 };
+	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0, theme: 'amber' };
 	try {
 		const row = await getSettings(locals.sessionId, locals.user?.id);
 		if (row) {
 			settings = {
 				autoNext: row.auto_next ?? false,
 				voice: row.voice ?? 'af_bella',
-				speed: row.speed ?? 1.0
+				speed: row.speed ?? 1.0,
+				theme: row.theme ?? 'amber'
 			};
 		}
 	} catch (e) {