Add multi-accent palettes and a brighter Light Green theme (ticket 048)

Every built-in theme now exposes three accents (--c-accent/-2/-3) instead
of one, so PanelChart's series palette draws distinct colours per theme
via color-mix() rather than a fixed, theme-independent hex list. Existing
presets keep their current base surface/border/text/accent look — the two
new accent vars are purely additive. Adds a new "Light Green" scheme
(light-surfaced, same green/magenta hue family as "Green") selectable
alongside the existing built-ins, both in ColorScheme (frontend + backend)
and the settings picker.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/NavMenu.tsx

@@ -27,8 +27,14 @@ const COLOR_SCHEMES: ColorScheme[] = [
   'yellow',
   'pink',
   'orange',
+  'light_green',
 ]
 
+/** Display label for a `ColorScheme`: underscores become spaces so `capitalize` (which titles each word) renders e.g. "light_green" as "Light Green". */
+function schemeLabel(scheme: ColorScheme): string {
+  return scheme.replace(/_/g, ' ')
+}
+
 export function NavMenu({ stats }: { stats: Stats | null }) {
   const [openPanel, setOpenPanel] = useState<PanelName>(null)
   const panel = useSettingsPanel()
@@ -307,14 +313,14 @@ function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }
                     : 'border-border-soft text-text-muted hover:bg-surface-2'
                 }`}
               >
-                {scheme}
+                {schemeLabel(scheme)}
               </button>
               {scheme !== 'system' && (
                 <button
                   type="button"
                   onClick={() => downloadBuiltinTheme(scheme)}
                   className="rounded-r border border-l-0 border-border-soft px-1.5 py-1 text-xs text-text-faint hover:bg-surface-2 hover:text-text"
-                  aria-label={`Download ${scheme} theme`}
+                  aria-label={`Download ${schemeLabel(scheme)} theme`}
                   title="Download as .css"
                 >
                   ↓

webapp/src/components/PanelChart.tsx

@@ -22,8 +22,22 @@ export function seriesLabel(labels: Record<string, string>): string {
   return entries.map(([k, v]) => `${k}=${v}`).join(', ')
 }
 
-// Fixed, small categorical palette to avoid a colour-scale dependency; cycles if there are more series than colours.
-const COLORS = ['#38bdf8', '#f472b6', '#a78bfa', '#4ade80', '#fbbf24', '#fb7185', '#2dd4bf', '#f97316']
+// Categorical palette drawn from the active theme's accent set (ticket 048: every built-in theme
+// exposes --c-accent/--c-accent-2/--c-accent-3, not just one accent hue) instead of a hardcoded,
+// theme-independent hex list. `color-mix` tints/shades those three base accents into a fuller
+// 8-colour cycle (matching the previous fixed palette's size, so MAX_KEPT_SERIES/squashing below is
+// unaffected) without any JS colour math or a getComputedStyle read — the browser resolves the CSS
+// variables per-theme at paint time, same as `stroke="var(--c-border)"` elsewhere in this file.
+const COLORS = [
+  'var(--c-accent)',
+  'var(--c-accent-2)',
+  'var(--c-accent-3)',
+  'color-mix(in srgb, var(--c-accent) 60%, white)',
+  'color-mix(in srgb, var(--c-accent-2) 60%, white)',
+  'color-mix(in srgb, var(--c-accent-3) 60%, white)',
+  'color-mix(in srgb, var(--c-accent) 55%, black)',
+  'color-mix(in srgb, var(--c-accent-2) 55%, black)',
+]
 
 // One less than the palette size: above this many series, keep the top MAX_KEPT_SERIES (by value) and squash the
 // rest into a single "Other" bucket, so the squashed range never exceeds COLORS.length and never repeats a colour.