/* Ariadne — behaviour-pattern report: design tokens.
 *
 * PROVENANCE. The --exp-* block is the same token set as
 * omer/experiments/shared.css (values resolved from the flare design system in
 * ~/bf/flare/tokens/). It is duplicated rather than imported because this page
 * deploys as its own Cloudflare Pages project and cannot reach ../experiments/.
 * If shared.css changes, change this block with it.
 *
 * The --viz-* block is NEW and is the only addition: a categorical series
 * palette, because the --exp-* set is a severity palette and dataviz rules
 * forbid reusing status colours for series identity.
 *
 * Every --viz-series-* value is a step from a flare primitive ramp
 * (~/bf/flare/tokens/primitive/color.tokens.json) and the four-slot palette was
 * validated in BOTH modes with the dataviz validator on 2026-09-22:
 *   light  #1864ab,#d04434,#9333ea,#1f7a32  on #ffffff  -> ALL CHECKS PASS
 *   dark   #3c98e4,#e65543,#7b86f0,#2f9e44  on #1a1d1f  -> ALL CHECKS PASS
 * Worst adjacent tritan ΔE is 7.1 (the 6–8 floor band), so every series on this
 * page carries a legend AND a direct label — secondary encoding is mandatory,
 * not optional.
 */

:root, :root[data-theme="light"] {
  --exp-bg-base: #fbfcfd;
  --exp-bg-surface: #ffffff;
  --exp-bg-elevated: #f8f9fa;
  --exp-text: #12181c;
  --exp-muted: #687076;
  --exp-line-subtle: #e5e8eb;
  --exp-line: #d7dbdf;
  --exp-line-strong: #c1c8cd;

  --exp-accent: #f97461;
  --exp-accent-hover: #e65543;
  --exp-accent-text: #b23a2c;
  --exp-accent-subtle: #ffeae6;
  --exp-on-solid: #ffffff;

  --exp-sev-critical-solid: #c60d17;
  --exp-sev-critical-text: #a51111;
  --exp-sev-critical-subtle: #fee7e7;
  --exp-sev-high-text: #b23a2c;
  --exp-sev-high-subtle: #ffeae6;
  --exp-sev-medium-text: #9c4221;
  --exp-sev-medium-subtle: #fdf5ce;
  --exp-sev-low-text: #1864ab;
  --exp-sev-low-subtle: #dcf0ff;

  --exp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --exp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --exp-radius: 8px;
  --exp-radius-lg: 12px;

  /* ---- categorical series (validated; see header) ---- */
  --viz-series-1: #1864ab;   /* blue.11    — population / baseline */
  --viz-series-2: #d04434;   /* coral.10   — sanctioned cohort */
  --viz-series-3: #9333ea;   /* violet.9   — third series */
  --viz-series-4: #1f7a32;   /* green.11   — fourth series */
  /* diverging poles + neutral midpoint (polarity around AUC 0.5) */
  --viz-pos: #d04434;
  --viz-neg: #1864ab;
  --viz-mid: #889096;        /* neutral.9 — the midpoint must read as "nothing" */
  --viz-grid: #e5e8eb;
  --viz-deemph: #c1c8cd;
}

:root[data-theme="dark"] {
  --exp-bg-base: #151718;
  --exp-bg-surface: #1a1d1f;
  --exp-bg-elevated: #212426;
  --exp-text: #ecedee;
  --exp-muted: #9ba1a6;
  --exp-line-subtle: #2b2f32;
  --exp-line: #3a3f42;
  --exp-line-strong: #4c5155;

  --exp-accent: #f97461;
  --exp-accent-hover: #e65543;
  --exp-accent-text: #fdb5a8;
  --exp-accent-subtle: #5c1c14;

  --exp-sev-critical-text: #fea7a7;
  --exp-sev-critical-subtle: #550807;
  --exp-sev-high-text: #fdb5a8;
  --exp-sev-high-subtle: #5c1c14;
  --exp-sev-medium-text: #fdd960;
  --exp-sev-medium-subtle: #50200e;
  --exp-sev-low-text: #84c9fc;
  --exp-sev-low-subtle: #0a3258;

  --viz-series-1: #3c98e4;   /* blue.8   */
  --viz-series-2: #e65543;   /* coral.9  */
  --viz-series-3: #7b86f0;   /* indigo   */
  --viz-series-4: #2f9e44;   /* green.9  */
  --viz-pos: #e65543;
  --viz-neg: #3c98e4;
  --viz-mid: #697177;        /* neutralDark.9 */
  --viz-grid: #2b2f32;
  --viz-deemph: #4c5155;
}

/* The OS setting, for readers who never touched the toggle. The :not() guard
   lets an explicit light stamp win over OS-dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --exp-bg-base: #151718;
    --exp-bg-surface: #1a1d1f;
    --exp-bg-elevated: #212426;
    --exp-text: #ecedee;
    --exp-muted: #9ba1a6;
    --exp-line-subtle: #2b2f32;
    --exp-line: #3a3f42;
    --exp-line-strong: #4c5155;

    --exp-accent-text: #fdb5a8;
    --exp-accent-subtle: #5c1c14;
    --exp-sev-critical-text: #fea7a7;
    --exp-sev-critical-subtle: #550807;
    --exp-sev-high-text: #fdb5a8;
    --exp-sev-high-subtle: #5c1c14;
    --exp-sev-medium-text: #fdd960;
    --exp-sev-medium-subtle: #50200e;
    --exp-sev-low-text: #84c9fc;
    --exp-sev-low-subtle: #0a3258;

    --viz-series-1: #3c98e4;
    --viz-series-2: #e65543;
    --viz-series-3: #7b86f0;
    --viz-series-4: #2f9e44;
    --viz-pos: #e65543;
    --viz-neg: #3c98e4;
    --viz-mid: #697177;
    --viz-grid: #2b2f32;
    --viz-deemph: #4c5155;
  }
}