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/app.css

@@ -8,6 +8,47 @@
 	--color-surface-3: #3f3f46;   /* zinc-700 */
 	--color-muted: #a1a1aa;       /* zinc-400 */
 	--color-text: #f4f4f5;        /* zinc-100 */
+	--color-border: #3f3f46;      /* zinc-700 */
+	--color-danger: #f87171;      /* red-400 */
+}
+
+/* ── Amber theme (default) — same as @theme above, explicit for clarity ── */
+[data-theme="amber"] {
+	--color-brand:     #f59e0b;
+	--color-brand-dim: #d97706;
+	--color-surface:   #18181b;
+	--color-surface-2: #27272a;
+	--color-surface-3: #3f3f46;
+	--color-muted:     #a1a1aa;
+	--color-text:      #f4f4f5;
+	--color-border:    #3f3f46;
+	--color-danger:    #f87171;
+}
+
+/* ── Slate theme — indigo/slate dark ─────────────────────────────────── */
+[data-theme="slate"] {
+	--color-brand:     #818cf8;   /* indigo-400 */
+	--color-brand-dim: #4f46e5;   /* indigo-600 */
+	--color-surface:   #0f172a;   /* slate-900 */
+	--color-surface-2: #1e293b;   /* slate-800 */
+	--color-surface-3: #334155;   /* slate-700 */
+	--color-muted:     #94a3b8;   /* slate-400 */
+	--color-text:      #f1f5f9;   /* slate-100 */
+	--color-border:    #334155;   /* slate-700 */
+	--color-danger:    #f87171;   /* red-400 */
+}
+
+/* ── Rose theme — dark pink ───────────────────────────────────────────── */
+[data-theme="rose"] {
+	--color-brand:     #fb7185;   /* rose-400 */
+	--color-brand-dim: #e11d48;   /* rose-600 */
+	--color-surface:   #18181b;   /* zinc-900 */
+	--color-surface-2: #1c1318;   /* custom dark rose */
+	--color-surface-3: #2d1f26;   /* custom dark rose-2 */
+	--color-muted:     #a1a1aa;   /* zinc-400 */
+	--color-text:      #f4f4f5;   /* zinc-100 */
+	--color-border:    #3f2d36;   /* custom rose border */
+	--color-danger:    #f87171;   /* red-400 */
 }
 
 html {
@@ -20,13 +61,13 @@ html {
 	max-width: 72ch;
 	line-height: 1.85;
 	font-size: 1.05rem;
-	color: #d4d4d8; /* zinc-300 */
+	color: var(--color-muted);
 }
 
 .prose-chapter h1,
 .prose-chapter h2,
 .prose-chapter h3 {
-	color: #f4f4f5;
+	color: var(--color-text);
 	font-weight: 700;
 	margin-top: 1.5em;
 	margin-bottom: 0.5em;
@@ -41,15 +82,15 @@ html {
 }
 
 .prose-chapter em {
-	color: #a1a1aa;
+	color: var(--color-muted);
 }
 
 .prose-chapter strong {
-	color: #f4f4f5;
+	color: var(--color-text);
 }
 
 .prose-chapter hr {
-	border-color: #3f3f46;
+	border-color: var(--color-border);
 	margin: 2em 0;
 }
 
@@ -62,4 +103,3 @@ html {
 .animate-progress-bar {
 	animation: progress-bar 8s cubic-bezier(0.1, 0.05, 0.1, 1) forwards;
 }
-