/* =========================================================
   APES UI — DESIGN TOKENS
   Loaded first on every page. One source of truth for colour
   and type: no other stylesheet should contain a raw hex.

   Palette: Budongo forest. Dark surfaces take a green-black
   cast from chimpanzee fur rather than the usual blue-grey;
   the accent is new canopy leaf; the Video Browser's light
   surfaces are warm paper rather than white.

   Contrast and colour-blind separation here were measured,
   not eyeballed — see the note above --c-kept.
   ========================================================= */

:root {
  /* ── Type ───────────────────────────────────────────────
     Platform stacks only. The app has no build step and runs
     on a private network, so it pulls no webfonts: a serif
     display face does the "field guide" work instead. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, ui-serif, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* ── Dark surfaces: chrome, sidebars, Gap Finder, Chunks ── */
  --bg:            #12140f;
  --surface:       #1b1f17;
  --surface-2:     #252a1f;
  --border:        #333a2a;
  --border-strong: #47503a;

  /* ── Ink on dark (ratios measured against --bg) ────────── */
  --text:     #e4e6da;   /* 14.7:1 */
  --text-dim: #b9bda8;   /*  8.7:1 on --surface */
  --muted:    #8d947d;   /*  5.9:1 */
  --faint:    #6b7360;   /*  3.8:1 — hint text only, never body copy */

  /* ── Accent: new canopy leaf ───────────────────────────── */
  --accent:       #8fbf4f;   /* 8.6:1 on --bg */
  --accent-hover: #a5d165;
  --accent-soft:  rgba(143, 191, 79, 0.12);
  --accent-line:  rgba(143, 191, 79, 0.30);
  --on-accent:    #12140f;   /* 8.6:1 on --accent */

  /* ── Semantic ink: text-weight, all >= 4.5:1 on --surface ── */
  --danger:      #d4705f;   /* 5.0:1 — laterite */
  --warn:        #d9a441;   /* 7.4:1 — dry grass */
  --success:     #8fbf4f;   /* 7.8:1 */
  --info:        #5aa9e0;   /* 6.5:1 — text twin of --c-dropped */
  --danger-soft: rgba(212, 112, 95, 0.15);
  --danger-line: rgba(212, 112, 95, 0.32);
  --danger-fill: rgba(212, 112, 95, 0.50);
  --warn-soft:   rgba(217, 164, 65, 0.12);

  /* ── Light surfaces: Video Browser results and analytics ── */
  --l-bg:            #f2f1e8;
  --l-surface:       #fbfaf4;
  --l-surface-2:     #f6f4ea;
  --l-border:        #ddd9c7;
  --l-border-strong: #c9c4ac;
  --l-text:          #22251c;   /* 13.7:1 on --l-bg */
  --l-muted:         #6a7059;   /*  4.6:1 on --l-bg */
  --l-hover:         #eaf0dc;
  --l-accent:        #4f6d26;   /*  5.2:1 on --l-bg */

  /* ── Badges on light (each pair >= 5:1) ────────────────── */
  --b-raw-bg: #e6edd9;  --b-raw-fg: #4a6322;
  --b-det-bg: #f3e6d2;  --b-det-fg: #8a5320;
  --b-seg-bg: #dcebe4;  --b-seg-fg: #2c5c48;

  /* ── Analytics histogram (single series: no legend needed) ── */
  --chart-bar:   #6c9539;   /* 3.4:1 on --l-surface */
  --chart-grid:  #e3e0d2;
  --chart-axis:  #b9b5a3;
  --chart-label: #6a7059;

  /* ── Chunk-plan states ──────────────────────────────────
     The three chromatic states were validated as a categorical
     set against --surface (dark, all pairs) with the data-viz
     validator: lightness band, chroma floor, normal-vision
     floor and contrast all pass. Worst colour-blind separation
     is dE 7.8 (deutan), which is only permissible because
     #ck-legend labels every swatch in text — keep those labels.
     --c-unanalysed is deliberately neutral, since "no data"
     reads as grey; it sits below the chroma floor by design and
     is excluded from the categorical check. */
  --c-kept:       #6c9539;
  --c-gap:        #ad4c42;
  --c-dropped:    #248fcc;
  --c-unanalysed: #7a7a6b;

  /* ── Misc ───────────────────────────────────────────────── */
  --video-bg: #000;
  --scrim:    rgba(9, 11, 7, 0.90);
  --radius:   8px;
}