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

@@ -34,6 +34,14 @@
  * composite K = H+150 (mod 360), then fill --c-surface-, --c-border-,
  * --c-text- as hsl(H, ...) at the saturation/lightness steps below, accent
  * + accent-text as hsl(C, ...), and accent-soft as hsl(K, ...).
+ *
+ * --c-accent (base look, unchanged above) is joined by two more accent
+ * colours (ticket 048) so charts/highlights can draw from a 3-colour set
+ * instead of one hue: --c-accent-2 sits at H+90 and --c-accent-3 at H+270 —
+ * a quadrature pair straddling the base hue, distinct from both the
+ * complement (accent) and the split-complement (accent-soft). These are
+ * purely additive: nothing that already reads --c-accent/-soft/-text
+ * changes look.
  */
 :root {
   color-scheme: light dark;
@@ -62,6 +70,8 @@
   --c-accent: #0ea5e9;
   --c-accent-soft: #0369a1;
   --c-accent-text: #7dd3fc;
+  --c-accent-2: #a78bfa;
+  --c-accent-3: #4ade80;
 }
 
 /* Exact lightness mirror of :root's neutral-950..50 scale (Tailwind neutral,
@@ -91,6 +101,8 @@ html.light {
   --c-accent: #0284c7;
   --c-accent-soft: #7dd3fc;
   --c-accent-text: #0369a1;
+  --c-accent-2: #7c3aed;
+  --c-accent-3: #16a34a;
 }
 
 /* base hue 0 (red): surfaces/borders/text tinted red; accent complement 180
@@ -115,6 +127,8 @@ html.red {
   --c-accent: hsl(180 70% 62%);
   --c-accent-soft: hsl(150 55% 34%);
   --c-accent-text: hsl(180 75% 80%);
+  --c-accent-2: hsl(90 65% 58%);
+  --c-accent-3: hsl(270 65% 68%);
 }
 
 /* base hue 140 (green): surfaces/borders/text tinted green; accent complement
@@ -139,6 +153,8 @@ html.green {
   --c-accent: hsl(320 70% 62%);
   --c-accent-soft: hsl(290 55% 34%);
   --c-accent-text: hsl(320 75% 80%);
+  --c-accent-2: hsl(230 65% 62%);
+  --c-accent-3: hsl(50 65% 58%);
 }
 
 /* base hue 210 (blue): surfaces/borders/text tinted blue; accent complement
@@ -163,6 +179,8 @@ html.blue {
   --c-accent: hsl(30 70% 62%);
   --c-accent-soft: hsl(0 55% 34%);
   --c-accent-text: hsl(30 75% 80%);
+  --c-accent-2: hsl(300 65% 68%);
+  --c-accent-3: hsl(120 65% 55%);
 }
 
 /* base hue 50 (yellow): surfaces/borders/text tinted yellow; accent
@@ -187,6 +205,8 @@ html.yellow {
   --c-accent: hsl(230 70% 62%);
   --c-accent-soft: hsl(200 55% 34%);
   --c-accent-text: hsl(230 75% 80%);
+  --c-accent-2: hsl(140 65% 55%);
+  --c-accent-3: hsl(320 65% 68%);
 }
 
 /* base hue 330 (pink): surfaces/borders/text tinted pink; accent complement
@@ -211,6 +231,8 @@ html.pink {
   --c-accent: hsl(150 70% 62%);
   --c-accent-soft: hsl(120 55% 34%);
   --c-accent-text: hsl(150 75% 80%);
+  --c-accent-2: hsl(60 65% 58%);
+  --c-accent-3: hsl(240 65% 68%);
 }
 
 /* base hue 30 (orange): surfaces/borders/text tinted orange; accent
@@ -235,6 +257,43 @@ html.orange {
   --c-accent: hsl(210 70% 62%);
   --c-accent-soft: hsl(180 55% 34%);
   --c-accent-text: hsl(210 75% 80%);
+  --c-accent-2: hsl(120 65% 55%);
+  --c-accent-3: hsl(300 65% 68%);
+}
+
+/* Brighter, light-surfaced counterpart to `green` (ticket 048): same base
+   hue (140) and accent hues as `green`, but with a `light`-style inverted
+   surface/border/text scale (high lightness instead of low) so it reads as
+   a distinctly brighter theme, not a re-tint of the dark `green`. Danger
+   colours are `light`'s (hue-neutral), matching how `light` itself doesn't
+   tint danger either. */
+html.light_green {
+  --c-surface-0: hsl(140 40% 96%);
+  --c-surface-1: hsl(140 35% 92%);
+  --c-surface-2: hsl(140 30% 85%);
+
+  --c-border: hsl(140 25% 80%);
+  --c-border-soft: hsl(140 22% 70%);
+  --c-border-faint: hsl(140 35% 92%);
+  --c-border-strong: hsl(140 20% 40%);
+
+  --c-text: hsl(140 30% 12%);
+  --c-text-secondary: hsl(140 20% 25%);
+  --c-text-muted: hsl(140 15% 40%);
+  --c-text-subtle: hsl(140 10% 50%);
+  --c-text-faint: hsl(140 10% 65%);
+  --c-text-faintest: hsl(140 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(320 70% 40%);
+  --c-accent-soft: hsl(290 60% 85%);
+  --c-accent-text: hsl(320 75% 28%);
+  --c-accent-2: hsl(230 70% 45%);
+  --c-accent-3: hsl(50 70% 38%);
 }
 
 @theme inline {
@@ -262,6 +321,8 @@ html.orange {
   --color-accent: var(--c-accent);
   --color-accent-soft: var(--c-accent-soft);
   --color-accent-text: var(--c-accent-text);
+  --color-accent-2: var(--c-accent-2);
+  --color-accent-3: var(--c-accent-3);
 }
 
 html,