/* ============================================================
   LIGHT / DARK MODE — neutral palettes + brand lightness.
   Loaded AFTER the design files so it drives light vs dark.
   The design controls style (fonts/shape/decoration); the theme
   controls brand HUE; this file makes the brand LIGHTNESS mode-aware
   so brand-coloured text always contrasts the background, and a
   single per-theme ink (--brand-ink) reliably contrasts brand fills.
   ============================================================ */
[data-mode="dark"]{
  --bg:        hsl(var(--brand-h) 30% 6%);
  --bg-2:      hsl(var(--brand-h) 32% 9%);
  --surface:   hsl(var(--brand-h) 26% 12%);
  --surface-2: hsl(var(--brand-h) 24% 17%);
  --surface-3: hsl(var(--brand-h) 22% 23%);
  --text:      hsl(var(--brand-h) 30% 97%);
  --text-dim:  hsl(var(--brand-h) 16% 72%);
  --text-mute: hsl(var(--brand-h) 12% 55%);
  --border:        hsl(var(--brand-h) 45% 82% / .12);
  --border-strong: hsl(var(--brand-h) 45% 82% / .24);
  /* --brand = vivid fill colour; --brand-text = legible brand-coloured TEXT on bg */
  --brand:       hsl(var(--brand-h) var(--brand-s) 54%);
  --brand-2:     hsl(var(--accent-h) var(--accent-s) 58%);
  --accent:      hsl(var(--accent-h) var(--accent-s) 60%);
  --brand-text:  hsl(var(--brand-h) calc(var(--brand-s) - 8%) 74%);
  --brand-soft:  hsl(var(--brand-h) var(--brand-s) 58% / .20);
  --accent-soft: hsl(var(--accent-h) var(--accent-s) 62% / .18);
  color-scheme: dark;
}
[data-mode="light"]{
  --bg:        hsl(var(--brand-h) 28% 97%);
  --bg-2:      hsl(var(--brand-h) 30% 93%);
  --surface:   #ffffff;
  --surface-2: hsl(var(--brand-h) 30% 96.5%);
  --surface-3: hsl(var(--brand-h) 24% 90%);
  --text:      hsl(var(--brand-h) 28% 12%);
  --text-dim:  hsl(var(--brand-h) 12% 38%);
  --text-mute: hsl(var(--brand-h) 10% 54%);
  --border:        hsl(var(--brand-h) 22% 87%);
  --border-strong: hsl(var(--brand-h) 22% 75%);
  /* --brand = vivid fill colour; --brand-text = legible brand-coloured TEXT on bg */
  --brand:       hsl(var(--brand-h) var(--brand-s) 46%);
  --brand-2:     hsl(var(--accent-h) var(--accent-s) 47%);
  --accent:      hsl(var(--accent-h) var(--accent-s) 47%);
  --brand-text:  hsl(var(--brand-h) var(--brand-s) 32%);
  --brand-soft:  hsl(var(--brand-h) var(--brand-s) 46% / .12);
  --accent-soft: hsl(var(--accent-h) var(--accent-s) 47% / .12);
  color-scheme: light;
}
/* keep the brand gradient + the ink (text on a brand fill) consistent.
   --brand-ink is supplied per theme (themes.css) / per custom brand (state.js). */
[data-mode] ,
:root{
  --grad-brand: linear-gradient(125deg, var(--brand), var(--accent));
  --brand-contrast: var(--brand-ink, #fff);
}