From dcc60006f519249641295a3846ccee5a101f5415 Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Tue, 10 Mar 2026 04:15:33 -0600
Subject: [PATCH] feat: expand accent palette and replace ThemeToggle with
 ThemePicker

- add 16 pastel accent colors (coral, peach, butter, lemon, celadon, sage, mint, seafoam, powder, mist, periwinkle, wisteria, lavender, orchid, blush, grey)
- replace ThemeToggle icon button with ThemePicker segmented light/dark control
- wire ThemePicker into AppHeader alongside existing accent/radius/background pickers
- update AccentPicker, BackgroundPicker, RadiusPicker to reflect new palette structure
- update theme store with ACCENT_VIVID/ACCENT_PASTEL split and full type union
---
 client/src/assets/theme/accents.css        | 555 ++++++++++++++++++---
 client/src/assets/theme/tokens.css         |  91 ++--
 client/src/components/AccentPicker.vue     |   4 +-
 client/src/components/AppHeader.vue        |  18 +-
 client/src/components/BackgroundPicker.vue |  35 +-
 client/src/components/RadiusPicker.vue     |  12 +-
 client/src/components/ThemePicker.vue      |  25 +
 client/src/components/ThemeToggle.vue      |  23 -
 client/src/stores/theme.ts                 |   4 +
 9 files changed, 604 insertions(+), 163 deletions(-)
 create mode 100644 client/src/components/ThemePicker.vue
 delete mode 100644 client/src/components/ThemeToggle.vue

diff --git a/client/src/assets/theme/accents.css b/client/src/assets/theme/accents.css
index be76460d9..848f55692 100644
--- a/client/src/assets/theme/accents.css
+++ b/client/src/assets/theme/accents.css
@@ -5,97 +5,528 @@
    Amber/yellow/lime/butter/lemon use dark foreground text.
 ────────────────────────────────────────────────────────────── */
 
-/* Vivid — 15 colors, rainbow order */
+/* Vivid — 17 colors, neutral + rainbow order */
 
-html.accent-rose { --tint-h: 15; --primary: oklch(0.57 0.24 15); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.57 0.24 15); --sidebar-primary: oklch(0.57 0.24 15); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-rose.dark { --primary: oklch(0.73 0.2 15); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.2 15); --sidebar-primary: oklch(0.73 0.2 15); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-white {
+  --tint-h: 0;
+  --tint-c: 0;
+  --primary: oklch(0.2 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.2 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.2 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-white.dark {
+  --tint-h: 0;
+  --tint-c: 0;
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.985 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-orange { --tint-h: 42; --primary: oklch(0.64 0.22 42); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.64 0.22 42); --sidebar-primary: oklch(0.64 0.22 42); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-orange.dark { --primary: oklch(0.78 0.18 42); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.78 0.18 42); --sidebar-primary: oklch(0.78 0.18 42); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-grey {
+  --tint-h: 0;
+  --tint-c: 0;
+  --primary: oklch(0.55 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.55 0 0);
+  --sidebar: oklch(0.96 0 0);
+  --sidebar-primary: oklch(0.55 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-grey.dark {
+  --tint-h: 0;
+  --tint-c: 0;
+  --primary: oklch(0.75 0 0);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0 0);
+  --sidebar: oklch(0.22 0 0);
+  --sidebar-primary: oklch(0.75 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-amber { --tint-h: 70; --primary: oklch(0.72 0.17 70); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.17 70); --sidebar-primary: oklch(0.72 0.17 70); --sidebar-primary-foreground: oklch(0.145 0 0); }
-html.accent-amber.dark { --primary: oklch(0.82 0.17 70); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.82 0.17 70); --sidebar-primary: oklch(0.82 0.17 70); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-rose {
+  --tint-h: 15;
+  --primary: oklch(0.57 0.24 15);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.57 0.24 15);
+  --sidebar-primary: oklch(0.57 0.24 15);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-rose.dark {
+  --primary: oklch(0.73 0.2 15);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.73 0.2 15);
+  --sidebar-primary: oklch(0.73 0.2 15);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-yellow { --tint-h: 95; --primary: oklch(0.75 0.18 95); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.18 95); --sidebar-primary: oklch(0.75 0.18 95); --sidebar-primary-foreground: oklch(0.145 0 0); }
-html.accent-yellow.dark { --primary: oklch(0.84 0.16 95); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.84 0.16 95); --sidebar-primary: oklch(0.84 0.16 95); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-orange {
+  --tint-h: 42;
+  --primary: oklch(0.64 0.22 42);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.64 0.22 42);
+  --sidebar-primary: oklch(0.64 0.22 42);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-orange.dark {
+  --primary: oklch(0.78 0.18 42);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.78 0.18 42);
+  --sidebar-primary: oklch(0.78 0.18 42);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-lime { --tint-h: 118; --primary: oklch(0.64 0.2 118); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.64 0.2 118); --sidebar-primary: oklch(0.64 0.2 118); --sidebar-primary-foreground: oklch(0.145 0 0); }
-html.accent-lime.dark { --primary: oklch(0.77 0.18 118); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.77 0.18 118); --sidebar-primary: oklch(0.77 0.18 118); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-amber {
+  --tint-h: 70;
+  --primary: oklch(0.72 0.17 70);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.17 70);
+  --sidebar-primary: oklch(0.72 0.17 70);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+html.accent-amber.dark {
+  --primary: oklch(0.82 0.17 70);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.82 0.17 70);
+  --sidebar-primary: oklch(0.82 0.17 70);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-green { --tint-h: 142; --primary: oklch(0.527 0.18 142); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.527 0.18 142); --sidebar-primary: oklch(0.527 0.18 142); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-green.dark { --primary: oklch(0.72 0.18 142); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.18 142); --sidebar-primary: oklch(0.72 0.18 142); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-yellow {
+  --tint-h: 95;
+  --primary: oklch(0.75 0.18 95);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.18 95);
+  --sidebar-primary: oklch(0.75 0.18 95);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+html.accent-yellow.dark {
+  --primary: oklch(0.84 0.16 95);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.84 0.16 95);
+  --sidebar-primary: oklch(0.84 0.16 95);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-emerald { --tint-h: 162; --primary: oklch(0.52 0.17 162); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.17 162); --sidebar-primary: oklch(0.52 0.17 162); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-emerald.dark { --primary: oklch(0.72 0.15 162); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.15 162); --sidebar-primary: oklch(0.72 0.15 162); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-lime {
+  --tint-h: 118;
+  --primary: oklch(0.64 0.2 118);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.64 0.2 118);
+  --sidebar-primary: oklch(0.64 0.2 118);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+html.accent-lime.dark {
+  --primary: oklch(0.77 0.18 118);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.77 0.18 118);
+  --sidebar-primary: oklch(0.77 0.18 118);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-teal { --tint-h: 180; --primary: oklch(0.52 0.18 180); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.18 180); --sidebar-primary: oklch(0.52 0.18 180); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-teal.dark { --primary: oklch(0.74 0.16 180); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.74 0.16 180); --sidebar-primary: oklch(0.74 0.16 180); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-green {
+  --tint-h: 142;
+  --primary: oklch(0.527 0.18 142);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.527 0.18 142);
+  --sidebar-primary: oklch(0.527 0.18 142);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-green.dark {
+  --primary: oklch(0.72 0.18 142);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.18 142);
+  --sidebar-primary: oklch(0.72 0.18 142);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-cyan { --tint-h: 197; --primary: oklch(0.52 0.2 197); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.2 197); --sidebar-primary: oklch(0.52 0.2 197); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-cyan.dark { --primary: oklch(0.75 0.17 197); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.17 197); --sidebar-primary: oklch(0.75 0.17 197); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-emerald {
+  --tint-h: 162;
+  --primary: oklch(0.52 0.17 162);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.52 0.17 162);
+  --sidebar-primary: oklch(0.52 0.17 162);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-emerald.dark {
+  --primary: oklch(0.72 0.15 162);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.15 162);
+  --sidebar-primary: oklch(0.72 0.15 162);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-sky { --tint-h: 213; --primary: oklch(0.54 0.21 213); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.54 0.21 213); --sidebar-primary: oklch(0.54 0.21 213); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-sky.dark { --primary: oklch(0.75 0.18 213); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.18 213); --sidebar-primary: oklch(0.75 0.18 213); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-teal {
+  --tint-h: 180;
+  --primary: oklch(0.52 0.18 180);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.52 0.18 180);
+  --sidebar-primary: oklch(0.52 0.18 180);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-teal.dark {
+  --primary: oklch(0.74 0.16 180);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.74 0.16 180);
+  --sidebar-primary: oklch(0.74 0.16 180);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-blue { --tint-h: 263; --primary: oklch(0.487 0.25 263); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.487 0.25 263); --sidebar-primary: oklch(0.487 0.25 263); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-blue.dark { --primary: oklch(0.72 0.2 263); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.2 263); --sidebar-primary: oklch(0.72 0.2 263); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-cyan {
+  --tint-h: 197;
+  --primary: oklch(0.52 0.2 197);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.52 0.2 197);
+  --sidebar-primary: oklch(0.52 0.2 197);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-cyan.dark {
+  --primary: oklch(0.75 0.17 197);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.17 197);
+  --sidebar-primary: oklch(0.75 0.17 197);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-indigo { --tint-h: 276; --primary: oklch(0.51 0.26 276); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.51 0.26 276); --sidebar-primary: oklch(0.51 0.26 276); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-indigo.dark { --primary: oklch(0.72 0.22 276); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.22 276); --sidebar-primary: oklch(0.72 0.22 276); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-sky {
+  --tint-h: 213;
+  --primary: oklch(0.54 0.21 213);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.54 0.21 213);
+  --sidebar-primary: oklch(0.54 0.21 213);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-sky.dark {
+  --primary: oklch(0.75 0.18 213);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.18 213);
+  --sidebar-primary: oklch(0.75 0.18 213);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-violet { --tint-h: 292; --primary: oklch(0.491 0.27 292); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.491 0.27 292); --sidebar-primary: oklch(0.491 0.27 292); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-violet.dark { --primary: oklch(0.72 0.23 292); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.23 292); --sidebar-primary: oklch(0.72 0.23 292); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-blue {
+  --tint-h: 263;
+  --primary: oklch(0.487 0.25 263);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.487 0.25 263);
+  --sidebar-primary: oklch(0.487 0.25 263);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-blue.dark {
+  --primary: oklch(0.72 0.2 263);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.2 263);
+  --sidebar-primary: oklch(0.72 0.2 263);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-fuchsia { --tint-h: 312; --primary: oklch(0.56 0.27 312); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.27 312); --sidebar-primary: oklch(0.56 0.27 312); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-fuchsia.dark { --primary: oklch(0.75 0.22 312); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.22 312); --sidebar-primary: oklch(0.75 0.22 312); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-indigo {
+  --tint-h: 276;
+  --primary: oklch(0.51 0.26 276);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.51 0.26 276);
+  --sidebar-primary: oklch(0.51 0.26 276);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-indigo.dark {
+  --primary: oklch(0.72 0.22 276);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.22 276);
+  --sidebar-primary: oklch(0.72 0.22 276);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-pink { --tint-h: 328; --primary: oklch(0.56 0.26 328); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.26 328); --sidebar-primary: oklch(0.56 0.26 328); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-pink.dark { --primary: oklch(0.75 0.22 328); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.22 328); --sidebar-primary: oklch(0.75 0.22 328); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-violet {
+  --tint-h: 292;
+  --primary: oklch(0.491 0.27 292);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.491 0.27 292);
+  --sidebar-primary: oklch(0.491 0.27 292);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-violet.dark {
+  --primary: oklch(0.72 0.23 292);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.23 292);
+  --sidebar-primary: oklch(0.72 0.23 292);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+
+html.accent-fuchsia {
+  --tint-h: 312;
+  --primary: oklch(0.56 0.27 312);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.56 0.27 312);
+  --sidebar-primary: oklch(0.56 0.27 312);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-fuchsia.dark {
+  --primary: oklch(0.75 0.22 312);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.22 312);
+  --sidebar-primary: oklch(0.75 0.22 312);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+
+html.accent-pink {
+  --tint-h: 328;
+  --primary: oklch(0.56 0.26 328);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.56 0.26 328);
+  --sidebar-primary: oklch(0.56 0.26 328);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-pink.dark {
+  --primary: oklch(0.75 0.22 328);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.22 328);
+  --sidebar-primary: oklch(0.75 0.22 328);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
 /* Pastel — 15 colors, rainbow order */
 
-html.accent-coral { --tint-h: 25; --primary: oklch(0.6 0.12 25); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.6 0.12 25); --sidebar-primary: oklch(0.6 0.12 25); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-coral.dark { --primary: oklch(0.76 0.1 25); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.76 0.1 25); --sidebar-primary: oklch(0.76 0.1 25); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-coral {
+  --tint-h: 25;
+  --primary: oklch(0.6 0.12 25);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.6 0.12 25);
+  --sidebar-primary: oklch(0.6 0.12 25);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-coral.dark {
+  --primary: oklch(0.76 0.1 25);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.76 0.1 25);
+  --sidebar-primary: oklch(0.76 0.1 25);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-peach { --tint-h: 38; --primary: oklch(0.63 0.11 38); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.63 0.11 38); --sidebar-primary: oklch(0.63 0.11 38); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-peach.dark { --primary: oklch(0.78 0.09 38); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.78 0.09 38); --sidebar-primary: oklch(0.78 0.09 38); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-peach {
+  --tint-h: 38;
+  --primary: oklch(0.63 0.11 38);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.63 0.11 38);
+  --sidebar-primary: oklch(0.63 0.11 38);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-peach.dark {
+  --primary: oklch(0.78 0.09 38);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.78 0.09 38);
+  --sidebar-primary: oklch(0.78 0.09 38);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-butter { --tint-h: 80; --primary: oklch(0.66 0.13 80); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.66 0.13 80); --sidebar-primary: oklch(0.66 0.13 80); --sidebar-primary-foreground: oklch(0.145 0 0); }
-html.accent-butter.dark { --primary: oklch(0.8 0.11 80); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.8 0.11 80); --sidebar-primary: oklch(0.8 0.11 80); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-butter {
+  --tint-h: 80;
+  --primary: oklch(0.66 0.13 80);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.66 0.13 80);
+  --sidebar-primary: oklch(0.66 0.13 80);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+html.accent-butter.dark {
+  --primary: oklch(0.8 0.11 80);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.8 0.11 80);
+  --sidebar-primary: oklch(0.8 0.11 80);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-lemon { --tint-h: 100; --primary: oklch(0.7 0.12 100); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.7 0.12 100); --sidebar-primary: oklch(0.7 0.12 100); --sidebar-primary-foreground: oklch(0.145 0 0); }
-html.accent-lemon.dark { --primary: oklch(0.82 0.1 100); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.82 0.1 100); --sidebar-primary: oklch(0.82 0.1 100); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-lemon {
+  --tint-h: 100;
+  --primary: oklch(0.7 0.12 100);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.7 0.12 100);
+  --sidebar-primary: oklch(0.7 0.12 100);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+html.accent-lemon.dark {
+  --primary: oklch(0.82 0.1 100);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.82 0.1 100);
+  --sidebar-primary: oklch(0.82 0.1 100);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-celadon { --tint-h: 122; --primary: oklch(0.61 0.1 122); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.61 0.1 122); --sidebar-primary: oklch(0.61 0.1 122); --sidebar-primary-foreground: oklch(0.145 0 0); }
-html.accent-celadon.dark { --primary: oklch(0.76 0.08 122); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.76 0.08 122); --sidebar-primary: oklch(0.76 0.08 122); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-celadon {
+  --tint-h: 122;
+  --primary: oklch(0.61 0.1 122);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.61 0.1 122);
+  --sidebar-primary: oklch(0.61 0.1 122);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
+html.accent-celadon.dark {
+  --primary: oklch(0.76 0.08 122);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.76 0.08 122);
+  --sidebar-primary: oklch(0.76 0.08 122);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-sage { --tint-h: 142; --primary: oklch(0.52 0.1 142); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.52 0.1 142); --sidebar-primary: oklch(0.52 0.1 142); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-sage.dark { --primary: oklch(0.72 0.09 142); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.72 0.09 142); --sidebar-primary: oklch(0.72 0.09 142); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-sage {
+  --tint-h: 142;
+  --primary: oklch(0.52 0.1 142);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.52 0.1 142);
+  --sidebar-primary: oklch(0.52 0.1 142);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-sage.dark {
+  --primary: oklch(0.72 0.09 142);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.72 0.09 142);
+  --sidebar-primary: oklch(0.72 0.09 142);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-mint { --tint-h: 158; --primary: oklch(0.6 0.1 158); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.6 0.1 158); --sidebar-primary: oklch(0.6 0.1 158); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-mint.dark { --primary: oklch(0.75 0.09 158); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.09 158); --sidebar-primary: oklch(0.75 0.09 158); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-mint {
+  --tint-h: 158;
+  --primary: oklch(0.6 0.1 158);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.6 0.1 158);
+  --sidebar-primary: oklch(0.6 0.1 158);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-mint.dark {
+  --primary: oklch(0.75 0.09 158);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.09 158);
+  --sidebar-primary: oklch(0.75 0.09 158);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-seafoam { --tint-h: 178; --primary: oklch(0.61 0.09 178); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.61 0.09 178); --sidebar-primary: oklch(0.61 0.09 178); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-seafoam.dark { --primary: oklch(0.76 0.08 178); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.76 0.08 178); --sidebar-primary: oklch(0.76 0.08 178); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-seafoam {
+  --tint-h: 178;
+  --primary: oklch(0.61 0.09 178);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.61 0.09 178);
+  --sidebar-primary: oklch(0.61 0.09 178);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-seafoam.dark {
+  --primary: oklch(0.76 0.08 178);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.76 0.08 178);
+  --sidebar-primary: oklch(0.76 0.08 178);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-powder { --tint-h: 205; --primary: oklch(0.59 0.1 205); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.59 0.1 205); --sidebar-primary: oklch(0.59 0.1 205); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-powder.dark { --primary: oklch(0.75 0.09 205); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.75 0.09 205); --sidebar-primary: oklch(0.75 0.09 205); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-powder {
+  --tint-h: 205;
+  --primary: oklch(0.59 0.1 205);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.59 0.1 205);
+  --sidebar-primary: oklch(0.59 0.1 205);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-powder.dark {
+  --primary: oklch(0.75 0.09 205);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.75 0.09 205);
+  --sidebar-primary: oklch(0.75 0.09 205);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-mist { --tint-h: 218; --primary: oklch(0.56 0.1 218); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.1 218); --sidebar-primary: oklch(0.56 0.1 218); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-mist.dark { --primary: oklch(0.74 0.09 218); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.74 0.09 218); --sidebar-primary: oklch(0.74 0.09 218); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-mist {
+  --tint-h: 218;
+  --primary: oklch(0.56 0.1 218);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.56 0.1 218);
+  --sidebar-primary: oklch(0.56 0.1 218);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-mist.dark {
+  --primary: oklch(0.74 0.09 218);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.74 0.09 218);
+  --sidebar-primary: oklch(0.74 0.09 218);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-periwinkle { --tint-h: 265; --primary: oklch(0.54 0.11 265); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.54 0.11 265); --sidebar-primary: oklch(0.54 0.11 265); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-periwinkle.dark { --primary: oklch(0.73 0.1 265); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.1 265); --sidebar-primary: oklch(0.73 0.1 265); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-periwinkle {
+  --tint-h: 265;
+  --primary: oklch(0.54 0.11 265);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.54 0.11 265);
+  --sidebar-primary: oklch(0.54 0.11 265);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-periwinkle.dark {
+  --primary: oklch(0.73 0.1 265);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.73 0.1 265);
+  --sidebar-primary: oklch(0.73 0.1 265);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-wisteria { --tint-h: 285; --primary: oklch(0.55 0.1 285); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.55 0.1 285); --sidebar-primary: oklch(0.55 0.1 285); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-wisteria.dark { --primary: oklch(0.73 0.09 285); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.09 285); --sidebar-primary: oklch(0.73 0.09 285); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-wisteria {
+  --tint-h: 285;
+  --primary: oklch(0.55 0.1 285);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.55 0.1 285);
+  --sidebar-primary: oklch(0.55 0.1 285);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-wisteria.dark {
+  --primary: oklch(0.73 0.09 285);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.73 0.09 285);
+  --sidebar-primary: oklch(0.73 0.09 285);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-lavender { --tint-h: 300; --primary: oklch(0.55 0.11 300); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.55 0.11 300); --sidebar-primary: oklch(0.55 0.11 300); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-lavender.dark { --primary: oklch(0.73 0.1 300); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.1 300); --sidebar-primary: oklch(0.73 0.1 300); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-lavender {
+  --tint-h: 300;
+  --primary: oklch(0.55 0.11 300);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.55 0.11 300);
+  --sidebar-primary: oklch(0.55 0.11 300);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-lavender.dark {
+  --primary: oklch(0.73 0.1 300);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.73 0.1 300);
+  --sidebar-primary: oklch(0.73 0.1 300);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
-html.accent-orchid { --tint-h: 315; --primary: oklch(0.56 0.11 315); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.56 0.11 315); --sidebar-primary: oklch(0.56 0.11 315); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-orchid.dark { --primary: oklch(0.74 0.1 315); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.74 0.1 315); --sidebar-primary: oklch(0.74 0.1 315); --sidebar-primary-foreground: oklch(0.145 0 0); }
-
-html.accent-blush { --tint-h: 345; --primary: oklch(0.54 0.11 345); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.54 0.11 345); --sidebar-primary: oklch(0.54 0.11 345); --sidebar-primary-foreground: oklch(0.985 0 0); }
-html.accent-blush.dark { --primary: oklch(0.73 0.1 345); --primary-foreground: oklch(0.145 0 0); --ring: oklch(0.73 0.1 345); --sidebar-primary: oklch(0.73 0.1 345); --sidebar-primary-foreground: oklch(0.145 0 0); }
+html.accent-orchid {
+  --tint-h: 315;
+  --primary: oklch(0.56 0.11 315);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.56 0.11 315);
+  --sidebar-primary: oklch(0.56 0.11 315);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-orchid.dark {
+  --primary: oklch(0.74 0.1 315);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.74 0.1 315);
+  --sidebar-primary: oklch(0.74 0.1 315);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
 
+html.accent-blush {
+  --tint-h: 345;
+  --primary: oklch(0.54 0.11 345);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.54 0.11 345);
+  --sidebar-primary: oklch(0.54 0.11 345);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+}
+html.accent-blush.dark {
+  --primary: oklch(0.73 0.1 345);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.73 0.1 345);
+  --sidebar-primary: oklch(0.73 0.1 345);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+}
diff --git a/client/src/assets/theme/tokens.css b/client/src/assets/theme/tokens.css
index ff2a39013..9e1c76851 100644
--- a/client/src/assets/theme/tokens.css
+++ b/client/src/assets/theme/tokens.css
@@ -12,44 +12,45 @@
   /* Tint controls — warm amber base */
   --tint-h: 80;
   --tint-c: 0.006;
+  --tint-c-surface: var(--tint-c);
 
   /* Colour roles */
-  --background: oklch(0.99 var(--tint-c) var(--tint-h));
-  --foreground: oklch(0.145 0.015 var(--tint-h));
+  --background: oklch(0.99 var(--tint-c-surface) var(--tint-h));
+  --foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
 
-  --card: oklch(0.975 var(--tint-c) var(--tint-h));
-  --card-foreground: oklch(0.145 0.015 var(--tint-h));
+  --card: oklch(0.975 var(--tint-c-surface) var(--tint-h));
+  --card-foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
 
-  --popover: oklch(0.975 var(--tint-c) var(--tint-h));
-  --popover-foreground: oklch(0.145 0.015 var(--tint-h));
+  --popover: oklch(0.975 var(--tint-c-surface) var(--tint-h));
+  --popover-foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
 
-  --primary: oklch(0.21 0.015 var(--tint-h));
+  --primary: oklch(0.21 var(--tint-c-surface) var(--tint-h));
   --primary-foreground: oklch(0.985 0.004 var(--tint-h));
 
-  --secondary: oklch(0.955 var(--tint-c) var(--tint-h));
-  --secondary-foreground: oklch(0.21 0.015 var(--tint-h));
+  --secondary: oklch(0.955 var(--tint-c-surface) var(--tint-h));
+  --secondary-foreground: oklch(0.21 var(--tint-c-surface) var(--tint-h));
 
-  --muted: oklch(0.955 var(--tint-c) var(--tint-h));
+  --muted: oklch(0.955 var(--tint-c-surface) var(--tint-h));
   --muted-foreground: oklch(0.52 0.008 var(--tint-h));
 
-  --accent: oklch(0.955 var(--tint-c) var(--tint-h));
-  --accent-foreground: oklch(0.21 0.015 var(--tint-h));
+  --accent: oklch(0.955 var(--tint-c-surface) var(--tint-h));
+  --accent-foreground: oklch(0.21 var(--tint-c-surface) var(--tint-h));
 
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
 
-  --border: oklch(0.878 0.01 var(--tint-h));
-  --input: oklch(0.878 0.01 var(--tint-h));
-  --ring: oklch(0.65 0.01 var(--tint-h));
+  --border: oklch(0.878 var(--tint-c-surface) var(--tint-h));
+  --input: oklch(0.878 var(--tint-c-surface) var(--tint-h));
+  --ring: oklch(0.65 var(--tint-c-surface) var(--tint-h));
 
-  --sidebar: oklch(0.965 var(--tint-c) var(--tint-h));
-  --sidebar-foreground: oklch(0.145 0.015 var(--tint-h));
-  --sidebar-primary: oklch(0.21 0.015 var(--tint-h));
+  --sidebar: oklch(0.965 var(--tint-c-surface) var(--tint-h));
+  --sidebar-foreground: oklch(0.145 var(--tint-c-surface) var(--tint-h));
+  --sidebar-primary: oklch(0.21 var(--tint-c-surface) var(--tint-h));
   --sidebar-primary-foreground: oklch(0.985 0.004 var(--tint-h));
-  --sidebar-accent: oklch(0.955 var(--tint-c) var(--tint-h));
-  --sidebar-accent-foreground: oklch(0.21 0.015 var(--tint-h));
-  --sidebar-border: oklch(0.878 0.01 var(--tint-h));
-  --sidebar-ring: oklch(0.65 0.01 var(--tint-h));
+  --sidebar-accent: oklch(0.955 var(--tint-c-surface) var(--tint-h));
+  --sidebar-accent-foreground: oklch(0.21 var(--tint-c-surface) var(--tint-h));
+  --sidebar-border: oklch(0.878 var(--tint-c-surface) var(--tint-h));
+  --sidebar-ring: oklch(0.65 var(--tint-c-surface) var(--tint-h));
 
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -58,10 +59,10 @@
   --chart-5: oklch(0.769 0.188 70.08);
 
   /* Elevation surfaces */
-  --surface-1: oklch(0.975 var(--tint-c) var(--tint-h));
-  --surface-2: oklch(0.955 var(--tint-c) var(--tint-h));
-  --surface-3: oklch(0.93 0.01 var(--tint-h));
-  --surface-4: oklch(0.91 0.012 var(--tint-h));
+  --surface-1: oklch(0.975 var(--tint-c-surface) var(--tint-h));
+  --surface-2: oklch(0.955 var(--tint-c-surface) var(--tint-h));
+  --surface-3: oklch(0.93 var(--tint-c-surface) var(--tint-h));
+  --surface-4: oklch(0.91 var(--tint-c-surface) var(--tint-h));
 
   /* Shadows */
   --elevation-xs: 0 1px 2px oklch(0 0 0 / 0.05);
@@ -74,32 +75,33 @@
   /* Shape */
   --radius: 0.625rem;
 
-  --dot-color: oklch(0.82 0.01 var(--tint-h));
+  --dot-color: oklch(0.82 var(--tint-c-surface) var(--tint-h));
 }
 
 .dark {
   --tint-c: 0.01;
+  --tint-c-surface: var(--tint-c);
   --bg-lift: 0;
 
-  --background: oklch(calc(0.145 + var(--bg-lift)) var(--tint-c) var(--tint-h));
+  --background: oklch(calc(0.145 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --foreground: oklch(0.985 0.004 var(--tint-h));
 
-  --card: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
+  --card: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --card-foreground: oklch(0.985 0.004 var(--tint-h));
 
-  --popover: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
+  --popover: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --popover-foreground: oklch(0.985 0.004 var(--tint-h));
 
-  --primary: oklch(0.91 var(--tint-c) var(--tint-h));
-  --primary-foreground: oklch(0.205 0.012 var(--tint-h));
+  --primary: oklch(0.91 var(--tint-c-surface) var(--tint-h));
+  --primary-foreground: oklch(0.205 var(--tint-c-surface) var(--tint-h));
 
-  --secondary: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
+  --secondary: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --secondary-foreground: oklch(0.985 0.004 var(--tint-h));
 
-  --muted: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
+  --muted: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --muted-foreground: oklch(0.68 0.008 var(--tint-h));
 
-  --accent: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
+  --accent: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --accent-foreground: oklch(0.985 0.004 var(--tint-h));
 
   --destructive: oklch(0.704 0.191 22.216);
@@ -109,11 +111,11 @@
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.52 0.008 var(--tint-h));
 
-  --sidebar: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
+  --sidebar: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --sidebar-foreground: oklch(0.985 0.004 var(--tint-h));
-  --sidebar-primary: oklch(0.91 var(--tint-c) var(--tint-h));
-  --sidebar-primary-foreground: oklch(0.205 0.012 var(--tint-h));
-  --sidebar-accent: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
+  --sidebar-primary: oklch(0.91 var(--tint-c-surface) var(--tint-h));
+  --sidebar-primary-foreground: oklch(0.205 var(--tint-c-surface) var(--tint-h));
+  --sidebar-accent: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --sidebar-accent-foreground: oklch(0.985 0.004 var(--tint-h));
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.52 0.008 var(--tint-h));
@@ -125,10 +127,10 @@
   --chart-5: oklch(0.645 0.246 16.439);
 
   /* Elevation surfaces */
-  --surface-1: oklch(calc(0.205 + var(--bg-lift)) 0.012 var(--tint-h));
-  --surface-2: oklch(calc(0.235 + var(--bg-lift)) 0.012 var(--tint-h));
-  --surface-3: oklch(calc(0.265 + var(--bg-lift)) 0.012 var(--tint-h));
-  --surface-4: oklch(calc(0.295 + var(--bg-lift)) 0.012 var(--tint-h));
+  --surface-1: oklch(calc(0.205 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
+  --surface-2: oklch(calc(0.235 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
+  --surface-3: oklch(calc(0.265 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
+  --surface-4: oklch(calc(0.295 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
 
   /* Shadows */
   --elevation-xs: 0 1px 2px oklch(0 0 0 / 0.4);
@@ -138,6 +140,5 @@
   --elevation-xl: 0 20px 30px -5px oklch(0 0 0 / 0.6), 0 8px 12px -6px oklch(0 0 0 / 0.4);
   --elevation-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.7);
 
-  --dot-color: oklch(calc(0.3 + var(--bg-lift)) 0.01 var(--tint-h));
+  --dot-color: oklch(calc(0.3 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
 }
-
diff --git a/client/src/components/AccentPicker.vue b/client/src/components/AccentPicker.vue
index 7b654d7e2..162d982ad 100644
--- a/client/src/components/AccentPicker.vue
+++ b/client/src/components/AccentPicker.vue
@@ -7,7 +7,7 @@ const themeStore = useThemeStore()
 
 <template>
   <div class="space-y-1.5">
-    <div class="flex items-center gap-0.5">
+    <div class="flex items-center gap-0.5 flex-wrap">
       <Tooltip v-for="opt in ACCENT_VIVID" :key="opt.id">
         <TooltipTrigger as-child>
           <button
@@ -24,7 +24,7 @@ const themeStore = useThemeStore()
         <TooltipContent>{{ opt.label }}</TooltipContent>
       </Tooltip>
     </div>
-    <div class="flex items-center gap-0.5">
+    <div class="flex items-center gap-0.5 flex-wrap">
       <Tooltip v-for="opt in ACCENT_PASTEL" :key="opt.id">
         <TooltipTrigger as-child>
           <button
diff --git a/client/src/components/AppHeader.vue b/client/src/components/AppHeader.vue
index 53650e38c..c722bc5e1 100644
--- a/client/src/components/AppHeader.vue
+++ b/client/src/components/AppHeader.vue
@@ -18,7 +18,7 @@ import AccentPicker from '@/components/AccentPicker.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import RadiusPicker from '@/components/RadiusPicker.vue'
 import BackgroundPicker from '@/components/BackgroundPicker.vue'
-import ThemeToggle from '@/components/ThemeToggle.vue'
+import ThemePicker from '@/components/ThemePicker.vue'
 import { useGlobalSearch, type GlobalSearchResult } from '@/features/book/composables/useGlobalSearch'
 import BookCoverImage from '@/features/book/components/BookCoverImage.vue'
 import { useAuth } from '@/features/auth/composables/useAuth'
@@ -243,7 +243,10 @@ function formatBadgeClass(fmt: string): string {
           ref="desktopSearchInput"
           v-model="globalSearchQuery"
           @focus="searchFocused = true"
-          @blur="searchFocused = false; selectedIndex = -1"
+          @blur="
+            searchFocused = false
+            selectedIndex = -1
+          "
           @keydown="handleSearchKeydown"
           placeholder="Search all books..."
           class="w-full h-8 pl-9 pr-8 text-[13px] rounded-full border-none bg-primary/5 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1.5 focus:ring-primary/30 transition-all duration-300 shadow-inner shadow-black/5"
@@ -252,7 +255,10 @@ function formatBadgeClass(fmt: string): string {
           <button v-if="globalSearchQuery" @click="clearSearch()" class="text-muted-foreground/60 hover:text-foreground transition-colors">
             <X :size="13" />
           </button>
-          <kbd v-else class="hidden lg:inline-flex h-4.5 select-none items-center gap-1 rounded border border-sidebar-border/50 bg-background/50 px-1.5 font-mono text-[9px] font-medium text-muted-foreground/40 opacity-100">
+          <kbd
+            v-else
+            class="hidden lg:inline-flex h-4.5 select-none items-center gap-1 rounded border border-sidebar-border/50 bg-background/50 px-1.5 font-mono text-[9px] font-medium text-muted-foreground/40 opacity-100"
+          >
             <span class="text-xs">⌘</span>K
           </kbd>
         </div>
@@ -369,6 +375,10 @@ function formatBadgeClass(fmt: string): string {
             <PopoverContent class="w-72 p-4" align="end">
               <div class="space-y-4">
                 <p class="text-xs font-semibold text-foreground uppercase tracking-wider">Appearance</p>
+                <div class="space-y-1.5">
+                  <span class="text-xs text-muted-foreground">Theme</span>
+                  <ThemePicker />
+                </div>
                 <div class="space-y-1.5">
                   <span class="text-xs text-muted-foreground">Accent</span>
                   <AccentPicker />
@@ -396,8 +406,6 @@ function formatBadgeClass(fmt: string): string {
           <TooltipContent>Settings</TooltipContent>
         </Tooltip>
 
-        <ThemeToggle />
-
         <!-- User avatar dropdown -->
         <DropdownMenu v-if="user">
           <DropdownMenuTrigger as-child>
diff --git a/client/src/components/BackgroundPicker.vue b/client/src/components/BackgroundPicker.vue
index a80f1d29c..e340fd5ae 100644
--- a/client/src/components/BackgroundPicker.vue
+++ b/client/src/components/BackgroundPicker.vue
@@ -1,29 +1,24 @@
 <script setup lang="ts">
 import { BACKGROUND_OPTIONS, useThemeStore } from '@/stores/theme'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 const themeStore = useThemeStore()
 </script>
 
 <template>
-  <div class="grid grid-cols-4 gap-2">
-    <button
-      v-for="opt in BACKGROUND_OPTIONS"
-      :key="opt.id"
-      type="button"
-      class="flex flex-col items-center gap-1 cursor-pointer focus:outline-none"
-      @click="themeStore.setBackground(opt.id)"
-    >
-      <div
-        class="w-full h-9 rounded overflow-hidden ring-2 transition-all"
-        :class="themeStore.background === opt.id ? 'ring-primary' : 'ring-border hover:ring-muted-foreground/40'"
-      >
-        <div class="w-full h-full bg-background" :class="opt.cssClass" />
-      </div>
-      <span
-        class="text-[10px] font-medium transition-colors leading-none"
-        :class="themeStore.background === opt.id ? 'text-primary' : 'text-muted-foreground'"
-        >{{ opt.label }}</span
-      >
-    </button>
+  <div class="grid grid-cols-5 gap-2">
+    <Tooltip v-for="opt in BACKGROUND_OPTIONS" :key="opt.id">
+      <TooltipTrigger as-child>
+        <button type="button" class="flex flex-col items-center cursor-pointer focus:outline-none" @click="themeStore.setBackground(opt.id)">
+          <div
+            class="w-full h-8 rounded overflow-hidden ring-2 transition-all"
+            :class="themeStore.background === opt.id ? 'ring-primary' : 'ring-border hover:ring-muted-foreground/40'"
+          >
+            <div class="w-full h-full bg-background" :class="opt.cssClass" />
+          </div>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{{ opt.label }}</TooltipContent>
+    </Tooltip>
   </div>
 </template>
diff --git a/client/src/components/RadiusPicker.vue b/client/src/components/RadiusPicker.vue
index d0b330c51..f5094c96c 100644
--- a/client/src/components/RadiusPicker.vue
+++ b/client/src/components/RadiusPicker.vue
@@ -5,19 +5,19 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 const themeStore = useThemeStore()
 
 const shapes = [
-  { id: 'sharp' as const, rx: '1' },
-  { id: 'default' as const, rx: '4' },
-  { id: 'rounded' as const, rx: '9' },
-  { id: 'pill' as const, rx: '999' },
+  { id: 'sharp' as const, rx: '0' },
+  { id: 'default' as const, rx: '3' },
+  { id: 'rounded' as const, rx: '8' },
+  { id: 'pill' as const, rx: '99' },
 ]
 </script>
 
 <template>
-  <div class="flex items-center gap-1">
+  <div class="flex items-center gap-1.5">
     <Tooltip v-for="s in shapes" :key="s.id">
       <TooltipTrigger as-child>
         <button
-          class="w-4 h-4 border-2 transition-colors focus:outline-none"
+          class="w-8 h-5 border-2 transition-colors focus:outline-none"
           :style="{
             borderRadius: `${s.rx}px`,
             borderColor: themeStore.radius === s.id ? 'var(--primary)' : 'var(--muted-foreground)',
diff --git a/client/src/components/ThemePicker.vue b/client/src/components/ThemePicker.vue
new file mode 100644
index 000000000..1339eb90d
--- /dev/null
+++ b/client/src/components/ThemePicker.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Moon, Sun } from 'lucide-vue-next'
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+</script>
+
+<template>
+  <div class="flex items-center gap-1 p-1 rounded-md border border-border bg-muted/50 w-fit">
+    <button
+      class="flex items-center gap-1.5 px-2.5 py-1 rounded text-[10px] font-medium transition-colors focus:outline-none"
+      :class="themeStore.theme === 'light' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+      @click="themeStore.theme = 'light'"
+    >
+      <Sun :size="12" /> Light
+    </button>
+    <button
+      class="flex items-center gap-1.5 px-2.5 py-1 rounded text-[10px] font-medium transition-colors focus:outline-none"
+      :class="themeStore.theme === 'dark' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+      @click="themeStore.theme = 'dark'"
+    >
+      <Moon :size="12" /> Dark
+    </button>
+  </div>
+</template>
diff --git a/client/src/components/ThemeToggle.vue b/client/src/components/ThemeToggle.vue
deleted file mode 100644
index 86b32b6c7..000000000
--- a/client/src/components/ThemeToggle.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { Moon, Sun } from 'lucide-vue-next'
-import { useThemeStore } from '@/stores/theme'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-
-const themeStore = useThemeStore()
-</script>
-
-<template>
-  <Tooltip>
-    <TooltipTrigger as-child>
-      <button
-        @click="themeStore.toggleTheme()"
-        class="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-        :aria-label="themeStore.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
-      >
-        <Sun v-if="themeStore.theme === 'dark'" :size="16" />
-        <Moon v-else :size="16" />
-      </button>
-    </TooltipTrigger>
-    <TooltipContent>{{ themeStore.theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode' }}</TooltipContent>
-  </Tooltip>
-</template>
diff --git a/client/src/stores/theme.ts b/client/src/stores/theme.ts
index 8d772a72d..26705d4f6 100644
--- a/client/src/stores/theme.ts
+++ b/client/src/stores/theme.ts
@@ -4,6 +4,7 @@ import { storage } from '@/services/storage'
 
 type Theme = 'light' | 'dark'
 export type Accent =
+  | 'grey'
   // Vivid — rainbow order
   | 'rose'
   | 'orange'
@@ -21,6 +22,7 @@ export type Accent =
   | 'fuchsia'
   | 'pink'
   // Pastel — rainbow order
+  | 'white'
   | 'coral'
   | 'peach'
   | 'butter'
@@ -54,6 +56,7 @@ export type Background =
   | 'terminal'
 
 export const ACCENT_VIVID: { id: Accent; label: string; color: string }[] = [
+  { id: 'white', label: 'White', color: '#fafafa' },
   { id: 'rose', label: 'Rose', color: '#e11d48' },
   { id: 'orange', label: 'Orange', color: '#ea580c' },
   { id: 'amber', label: 'Amber', color: '#d97706' },
@@ -72,6 +75,7 @@ export const ACCENT_VIVID: { id: Accent; label: string; color: string }[] = [
 ]
 
 export const ACCENT_PASTEL: { id: Accent; label: string; color: string }[] = [
+  { id: 'grey', label: 'Grey', color: '#737373' },
   { id: 'coral', label: 'Coral', color: '#e8968a' },
   { id: 'peach', label: 'Peach', color: '#e8b08a' },
   { id: 'butter', label: 'Butter', color: '#d4be7a' },