/* Semantic theme layer — derived from the base16 contract in
   `colors.css`. This is what the app references (`--bg`, `--fg`,
   `--purple`, …); page CSS must use these names, never literal colours
   and never the raw `--baseNN` slots.

   Standalone stylesheet, linked by every page right AFTER `colors.css`
   (which defines the `--baseNN` slots these rules resolve against). Kept
   separate from the page bundles — esbuild would otherwise inline an
   `@import` and bake the palette into every CSS bundle.

   A theme swap touches only `colors.css` (the 16 base16 slots); this
   derivation layer never changes. See docs/web-ui/css-vars.md. */
:root {
  --bg: var(--base00);
  --bg-elev: var(--base01); /* elevated surfaces: dropdowns, popovers */
  --border: var(--base02); /* general borders, hover/active backgrounds */
  --purple-dim: var(--base03); /* subtle borders, terminal chrome, badge bg */
  --fg: var(--base05);
  --red: var(--base08); /* errors, fail state */
  --amber: var(--base09); /* warnings, pending / running state */
  --yellow: var(--base0A); /* flash messages, mild warnings */
  --green: var(--base0B); /* success, ok state */
  --cyan: var(--base0C); /* tool-use events, info accents */
  --blue: var(--base0D); /* links, interactive accent (distinct from cyan) */
  --purple: var(--base0E); /* accent — active tabs, links, highlights */
  --pink: var(--base0F); /* thinking events */

  /* Off-base16 (no exact slot) — derived from base16 so they still track
     a swap. Each is pixel-identical to its prior literal under the
     default palette: --crust is a darkened bg; --muted / --subtext0 are
     foreground↔background blends (two levels of dimmed text). */
  --crust: color-mix(in srgb, var(--base00) 58%, #000000); /* terminal / code bg, below --bg */
  --muted: color-mix(in srgb, var(--base05) 55.5%, var(--base00)); /* secondary / dimmed text */
  --subtext0: color-mix(in srgb, var(--base05) 77.7%, var(--base00)); /* toolbar/status text; dimmer than --fg, lighter than --muted */

  /* `--muted`, above, is mixed toward `--base00`/`--bg` — correct for
     dimmed text on the page background, wrong for dimmed text sitting on
     an elevated fill like `--purple-dim` (badge/dropdown-item
     backgrounds). Case in point: `.ui-badge-label` used bare `--muted`
     and mara measured it at ~1.3:1 against her theme's badge fill —
     `--muted` had never been checked against anything but `--bg`. This
     variant mixes toward the *actual* surface it sits on instead, same
     technique, correct anchor. Ceiling note: even plain `--fg` (100% —
     the max this can approach) only reaches ~3.4:1 against `--purple-dim`
     in mara's theme, short of formal 4.5:1 AA for normal text — that's
     the theme's own limit, not something the anchor choice can fix. 90%
     gets close to that ceiling (~3:1, more than double the old ~1.3:1)
     while keeping a hint of the label/value visual distinction. */
  --muted-on-dim: color-mix(in srgb, var(--fg) 90%, var(--purple-dim));
}