/* ---------------------------------------------------------------------------
   Brand tokens — deep forest green + terracotta on a bone/cream ground.

   Light and dark are BOTH first-class. Bone doesn't survive inversion, so the
   dark ground is a WARM charcoal (same warmth, different material) rather than
   a darkened bone.

   Every categorical / sequential value was produced and checked by
   design/palette_search.py against design/validate_palette.py. Do not hand-edit
   a hex — change the search inputs and re-run, so the gates stay honoured.

   THE ONE RULE THAT LOOKS ARBITRARY AND ISN'T:
   green and orange are the classic red-green confusion pair. At equal lightness
   sage-vs-terracotta measures CVD Delta E 3.9 (floor is 6) — indistinguishable to
   protanopes. What saves it is the LIGHTNESS SPLIT: forest is dark, terracotta is
   light, in both modes. Never re-step one toward the other.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* -- type ------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Data face: numerals must not shift width between frames. See brand.md. */
  --font-data: var(--font-ui);

  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.44rem;
  --step-3:  1.728rem;
  --step-4:  2.074rem;
  --step-5:  2.488rem;   /* hero figure on a report / stat tile */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.2;
  --leading-body: 1.6;

  /* -- shape ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* -- motion ----------------------------------------------------------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;

  /* ===================== LIGHT — bone & cream ========================== */
  --page:            #f6ecd7;   /* bone */
  --surface-1:       #fcf6ea;   /* cream — cards + chart surface (validated) */
  --surface-2:       #efe3c9;   /* recessed bone — wells, table zebra */
  --border-hairline: rgba(28, 26, 21, 0.12);

  --text-primary:   #1c1a15;    /* 16.2:1 */
  --text-secondary: #57523f;    /*  7.3:1 */
  --text-muted:     #8a8375;    /*  3.5:1 — axis ticks & labels only, never body */

  --brand:          #176020;    /* 7.2:1 — forest, safe for body text */
  --brand-mark:     #176020;    /* fills / series slot 1 */
  --brand-wash:     #e6f5e6;    /* tinted backgrounds, selected states */
  --accent:         #a2540d;    /* 5.1:1 — terracotta, safe for text */
  --accent-mark:    #bd7138;    /* terracotta fills / CTA */
  --accent-wash:    #fbe0cf;

  --grid:     #e8dcc3;
  --baseline: #d3c5a6;

  /* Categorical series — FIXED ORDER, assigned in sequence, never cycled.
     Slots 1-2 are the brand pair and carry the lightness split. */
  --series-1: #176020;  /* forest — brand */
  --series-2: #bd7138;  /* terracotta — accent */
  --series-3: #ae7bc5;  /* plum */
  --series-4: #9b4870;  /* rose */
  --series-5: #9c7c0b;  /* honey */
  --series-6: #029791;  /* teal */
  --series-7: #394c94;  /* periwinkle */
  --series-8: #9f4549;  /* brick */

  /* Sequential (forest) — magnitude. Calendar heatmap, density. */
  --seq-100: #e6f5e6;  --seq-150: #d7edd7;  --seq-200: #c6e4c6;
  --seq-250: #b4dab4;  --seq-300: #9fce9f;  --seq-350: #88c089;
  --seq-400: #70b172;  /* lightest step legal for an ORDINAL ramp on light */
  --seq-450: #5aa15d;  --seq-500: #46914a;  --seq-550: #347e3a;
  --seq-600: #266b2d;
  --seq-650: #1d5823;  /* darkest step legal for an ORDINAL ramp on dark */
  --seq-700: #16461b;

  /* Second sequential context (terracotta), when two appear at once. */
  --seq2-200: #f7d2bb;  --seq2-350: #e09f72;  --seq2-500: #b66625;  --seq2-650: #733800;

  /* Diverging — TEAL <-> TERRACOTTA. Deliberately NOT the brand pair: a
     diverging ramp mirrors lightness across the midpoint, which cancels the
     green/orange lightness split (measured CVD Delta E 3.3 — a hard fail).
     Teal against terracotta measures 9.7 at the same mirrored steps. */
  --div-neg-2: #02736e;
  --div-neg-1: #079a94;
  --div-mid:   #ebe7df;
  --div-pos-1: #bd7138;
  --div-pos-2: #964d09;

  /* Context markers — the "why progress stalled" annotation layer.
     Not a status colour, not a series colour. Identity comes from the label. */
  --marker-ink:  #57523f;
  --marker-rule: rgba(28, 26, 21, 0.30);   /* a moment: a precise line */
  --marker-band: rgba(28, 26, 21, 0.14);   /* a period: a soft-ended bar */
  --marker-wash: rgba(28, 26, 21, 0.06);   /* a calendar day inside a period */

  --delta-good: #1d5823;   /* success TEXT step (7.9:1), distinct from status-good */
}

/* ===================== DARK — warm charcoal ============================ */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --page:            #0f0c08;
    --surface-1:       #1a1714;   /* validated dark surface */
    --surface-2:       #27221c;
    --border-hairline: rgba(247, 242, 232, 0.13);

    --text-primary:   #f7f2e8;   /* 16.0:1 */
    --text-secondary: #c9c2b2;   /* 10.1:1 */
    --text-muted:     #8f887a;   /*  5.1:1 */

    --brand:          #5aa85d;   /* 6.1:1 — text-safe on charcoal */
    --brand-mark:     #2f7434;   /* series slot 1 — holds the lightness split */
    --brand-wash:     #16281a;
    --accent:         #ca7d44;
    --accent-mark:    #ca7d44;
    --accent-wash:    #2e1d10;

    --grid:     #2b251e;
    --baseline: #3a332a;

    --series-1: #2f7434;
    --series-2: #ca7d44;
    --series-3: #ae7bc5;
    --series-4: #9b4870;
    --series-5: #b2912e;
    --series-6: #06aba5;
    --series-7: #5469b4;
    --series-8: #ce6f70;

    /* Sequential flips its anchor in dark: pale = high, not "near surface". */
    --div-mid:   #312d28;
    --div-neg-1: #079a94;
    --div-neg-2: #65bcb7;
    --div-pos-1: #d59d77;
    --div-pos-2: #bd7138;

    --marker-ink:  #c9c2b2;
    --marker-rule: rgba(247, 242, 232, 0.32);
    --marker-band: rgba(247, 242, 232, 0.15);
    --marker-wash: rgba(247, 242, 232, 0.07);

    --delta-good: #5aa85d;
  }
}

/* Explicit user toggle must beat the OS setting in both directions. */
:root[data-theme="dark"] {
  --page:            #0f0c08;
  --surface-1:       #1a1714;
  --surface-2:       #27221c;
  --border-hairline: rgba(247, 242, 232, 0.13);
  --text-primary:   #f7f2e8;
  --text-secondary: #c9c2b2;
  --text-muted:     #8f887a;
  --brand:          #5aa85d;
  --brand-mark:     #2f7434;
  --brand-wash:     #16281a;
  --accent:         #ca7d44;
  --accent-mark:    #ca7d44;
  --accent-wash:    #2e1d10;
  --grid:     #2b251e;
  --baseline: #3a332a;
  --series-1: #2f7434;
  --series-2: #ca7d44;
  --series-3: #ae7bc5;
  --series-4: #9b4870;
  --series-5: #b2912e;
  --series-6: #06aba5;
  --series-7: #5469b4;
  --series-8: #ce6f70;
  --div-mid:   #312d28;
  --div-neg-1: #079a94;
  --div-neg-2: #65bcb7;
  --div-pos-1: #d59d77;
  --div-pos-2: #bd7138;
  --marker-ink:  #c9c2b2;
  --marker-rule: rgba(247, 242, 232, 0.32);
  --marker-band: rgba(247, 242, 232, 0.15);
  --marker-wash: rgba(247, 242, 232, 0.07);
  --delta-good: #5aa85d;
}

/* -- status: FIXED, never themed, never reused as "series 9" -------------
   Always shipped with an icon + label. On the cream surface `warning` and
   `serious` sit below 3:1 by design — the icon/label pairing is the
   mitigation, so a status colour never carries meaning alone.
   NOTE: status-good is a different green from the brand. Never put a
   status-good chip directly beside a series-1 mark without its label. */
:root {
  --status-good:     #0ca30c;   /* cream 3.1:1 · charcoal 5.3:1 */
  --status-warning:  #fab219;   /* cream 1.7:1 — icon+label required */
  --status-serious:  #ec835a;   /* cream 2.5:1 — icon+label required */
  --status-critical: #d03b3b;   /* cream 4.5:1 · charcoal 3.7:1 */
}

/* -- numerals ------------------------------------------------------------
   Anything in a column, on an axis, or updating in place gets tabular
   figures. Large standalone hero figures keep proportional figures. */
.tabular, th, td, .axis-tick, .metric-row__value {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-data);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}