/* --------------------------------------------------------------
   Design tokens.

   Two independent axes, and keeping them independent is the whole
   design:

     data-theme    light | dark      (absent = follow the system)
     data-palette  the accent family (absent = green)

   **A palette is only the accent.** The neutrals below are tuned
   for contrast and are deliberately not part of it: seven palettes
   times two modes is fourteen background/foreground combinations
   nobody would ever check, and the one that came out wrong would
   be a contrast bug on a screen being read in daylight on a
   rooftop. Changing the accent cannot produce that.

   **Every palette is defined in both modes, always** — as
   `--pal-<id>`, not only the selected one. That costs a few
   unused custom properties and buys two things: `--accent` is a
   plain alias rather than a fourth copy of the colour table, and
   the picker's swatches can show `var(--pal-yellow)` and get the
   colour the user would actually *get*, which in dark mode is a
   different hex from the light one. A swatch that lies about its
   own result is worse than no swatch.

   js/lib/theme.js owns the ids; render.test.mjs holds the two
   files to the same set.
   -------------------------------------------------------------- */

/* ---- light: the base ----------------------------------------
   Cool signal neutrals with a slight cyan bias, so an accent reads
   as chosen rather than stapled on. The light-mode accents are the
   deeper halves of each pair — white text has to sit on them. */
:root {
  color-scheme: light dark;
  --bg:      #f7f8f5;
  --card:    #eef0eb;
  --line:    #dadfd6;
  --fg:      #17201b;
  --muted:   #667069;
  --warn:    #a86b00;
  --danger:  #a3423a;
  /* Status green, and deliberately NOT --accent.
     --accent is a preference with seven settings, one of which is red; a
     signal meter that paints "excellent" in the user's chosen red, next to a
     "poor" that is also red, would be worse than having no colour at all. A
     status colour has to mean the same thing whatever the palette. */
  --ok:      #2e7d55;

  --pal-green:  #2e9e6b;
  --pal-blue:   #2b6fc2;
  --pal-violet: #6f52c9;
  --pal-amber:  #8a5c12;
  --pal-red:    #b3382f;
  --pal-yellow: #7a6a00;
  --pal-slate:  #4d6070;
  --accent-fg:  #ffffff;

  --stripe-dir:  var(--accent);
  --stripe-file: transparent;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Ubuntu, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
          Consolas, "Liberation Mono", Menlo, monospace;
}

/* The system's preference, but only while the user has not overridden it.
   Guarded with :not() rather than relying on source order: a bare `:root`
   here has the same specificity as the block above and would beat it, but
   *lose* to [data-theme] — which is the behaviour wanted. Saying so is
   cheaper than re-deriving it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:      #0f1411;
    --card:    #171d19;
    --line:    #232b25;
    --fg:      #dde3de;
    --muted:   #7f8b85;
    --warn:    #d99a2a;
    --danger:  #e07871;
    --ok:      #4cc38a;

    --pal-green:  #58cf94;
    --pal-blue:   #6bb2f2;
    --pal-violet: #a894f0;
    --pal-amber:  #e0a94a;
    --pal-red:    #f5877a;
    --pal-yellow: #e8d24e;
    --pal-slate:  #9fb3c2;
    --accent-fg:  #0f1411;
  }
}

/* An explicit choice wins in both directions, which is why dark is written
   out twice rather than only inside the media query. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:      #0f1411;
  --card:    #171d19;
  --line:    #232b25;
  --fg:      #dde3de;
  --muted:   #7f8b85;
  --warn:    #d99a2a;
  --danger:  #e07871;
  --ok:      #4cc38a;

  --pal-green:  #58cf94;
  --pal-blue:   #6bb2f2;
  --pal-violet: #a894f0;
  --pal-amber:  #e0a94a;
  --pal-red:    #f5877a;
  --pal-yellow: #e8d24e;
  --pal-slate:  #9fb3c2;
  --accent-fg:  #0f1411;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:      #f7f8f5;
  --card:    #eef0eb;
  --line:    #dadfd6;
  --fg:      #17201b;
  --muted:   #667069;
  --warn:    #a86b00;
  --danger:  #a3423a;
  --ok:      #2e7d55;

  --pal-green:  #2e9e6b;
  --pal-blue:   #2b6fc2;
  --pal-violet: #6f52c9;
  --pal-amber:  #8a5c12;
  --pal-red:    #b3382f;
  --pal-yellow: #7a6a00;
  --pal-slate:  #4d6070;
  --accent-fg:  #ffffff;
}

/* ---- which one is in use -------------------------------------
   Only `--accent`, and only an alias. Custom properties resolve where they
   are *used*, so these pick up whichever `--pal-*` the mode blocks above
   left on :root — which is why a palette needs no light/dark handling of
   its own. No block here touches a neutral, so nothing competes with the
   mode blocks on specificity. */
:root                       { --accent: var(--pal-green); }
:root[data-palette="green"] { --accent: var(--pal-green); }
:root[data-palette="blue"]  { --accent: var(--pal-blue); }
:root[data-palette="violet"]{ --accent: var(--pal-violet); }
:root[data-palette="amber"] { --accent: var(--pal-amber); }
:root[data-palette="red"]   { --accent: var(--pal-red); }
:root[data-palette="yellow"]{ --accent: var(--pal-yellow); }
:root[data-palette="slate"] { --accent: var(--pal-slate); }