/* ============================================================================
   eplankton — design tokens
   ----------------------------------------------------------------------------
   Direction: "a light data console — calm chrome, loud numbers."
   White cards on a soft grey field, one persistent left rail, hairline borders,
   Google's product-UI faces, as in Google Analytics: Google Sans for display,
   Google Sans Text for prose, labels and numbers (tabular figures, set on
   body), Google Sans Code only for code, raw lines and error dumps.
   Colour is reserved for meaning: blue = validated, amber = uncertain,
   red = contested. Chrome stays quiet so the data can be loud.

   Light is the primary theme. Dark is a real, separately-stepped secondary.

   The chart palette below was generated in OKLCH and validated with the dataviz
   validator (lightness band, chroma floor, protan/deutan CVD ΔE, normal-vision
   ΔE, contrast vs surface) in BOTH modes, on the ordering used here.

     categorical, adjacent pairs   light CVD ΔE 14.4 · normal ΔE 20.8
                                   dark  CVD ΔE 12.9 · normal ΔE 20.0
     scatter trio (all pairs)      light CVD ΔE 14.5 · normal ΔE 24.1
                                   dark  CVD ΔE 14.4 · normal ΔE 24.1

   DO NOT add, reorder or re-step these values. A 9th series folds into
   --series-other. A 4th scatter category folds into --series-other or facets.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- surfaces ------------------------------------------------------- */
  --bg:            #f6f7f9;   /* the soft grey field the cards sit on */
  --bg-deep:       #eceef1;
  --surface-1:     #ffffff;   /* card ground — the validated chart surface */
  --surface-2:     #f6f7f9;
  --surface-3:     #eceef1;
  --surface-hover: #f2f4f6;
  --surface-sunken:#f6f7f9;

  --line:          #e3e6ea;   /* card and table hairlines */
  --line-strong:   #c3c9d0;   /* control borders that need to be seen */
  --line-faint:    #eceef1;
  --line-control:  #dfe3e8;

  --text-primary:  #14181d;
  --text-secondary:#4d545d;
  --text-muted:    #636c7a;   /* WCAG AA: 4.5:1+ on #fff, --bg, --surface-hover and --surface-3 (EPL-1112) */
  --text-faint:    #98a0a9;   /* decorative only (2.4-2.65:1) — never readable text; use --text-muted (EPL-1122) */
  --text-inverse:  #ffffff;

  --grid:          rgba(20, 24, 29, .08);
  --axis:          rgba(20, 24, 29, .24);

  /* --- brand ---------------------------------------------------------- */
  --accent:        #2563d9;
  --accent-ink:    #ffffff;   /* text on an accent fill */
  --accent-dim:    #1b4fbd;   /* accent text on a wash */
  --accent-text:   #1b4fbd;
  --accent-wash:   #eef4ff;
  --accent-glow:   rgba(37, 99, 217, .16);
  --accent-soft:   #7ea6f0;

  /* --- meaning · the direction's reserved semantics -------------------- */
  --meaning-validated: #2563d9;   /* a human confirmed it */
  --meaning-model:     #7ea6f0;   /* the model alone */
  --meaning-uncertain: #e08a1e;   /* below the review threshold */
  --meaning-contested: #b03636;   /* people disagree */

  /* --- categorical series · fixed order, never cycled ------------------ */
  --series-1: #285cc2;  /* blue    */
  --series-2: #029a46;  /* green   */
  --series-3: #7a41af;  /* violet  */
  --series-4: #b02a2d;  /* red     */
  --series-5: #029393;  /* teal    */
  --series-6: #b66c00;  /* orange  */
  --series-7: #a62b6d;  /* magenta */
  --series-8: #868600;  /* olive   */
  --series-other: #7d858f;

  /* all-pairs safe trio — scatter, bubble, map pins, small multiples */
  --scatter-1: var(--series-1);
  --scatter-2: var(--series-7);
  --scatter-3: var(--series-8);

  /* --- sequential (blue), light -> dark -------------------------------- */
  --seq-100: #e9f0ff;  --seq-150: #d5e4fe;  --seq-200: #bfd5fe;
  --seq-250: #a4c3fd;  --seq-300: #86affd;  --seq-350: #6b9bfc;
  --seq-400: #5087fa;  --seq-450: #3e75eb;  --seq-500: #2d63d9;
  --seq-550: #1f51c2;  --seq-600: #1340a7;  --seq-650: #093088;
  --seq-700: #052266;

  /* second simultaneous sequential context (orange) */
  --seq2-100: #ffece1; --seq2-150: #fedbc6; --seq2-200: #fec7a6;
  --seq2-250: #fead7c; --seq2-300: #f59353; --seq2-350: #ea7d2e;
  --seq2-400: #d86b0d; --seq2-450: #c05e09; --seq2-500: #a85206;
  --seq2-550: #8f4402; --seq2-600: #773700; --seq2-650: #5e2900;
  --seq2-700: #471c00;

  /* --- diverging: blue <- neutral -> orange ---------------------------- */
  --div-neg-3: #1f51c2; --div-neg-2: #3e75eb; --div-neg-1: #a4c3fd;
  --div-mid:   #e3e6ea;
  --div-pos-1: #fead7c; --div-pos-2: #d86b0d; --div-pos-3: #a85206;

  /* --- status · reserved, always with icon + label --------------------- */
  --status-good:     #1b7a5a;
  --status-warning:  #e08a1e;
  --status-serious:  #a8681c;
  --status-critical: #b03636;
  --status-good-wash:     #e8f4ef;
  --status-warning-wash:  #fdf3e3;
  --status-serious-wash:  #fbeee1;
  --status-critical-wash: #fbeaea;

  /* --- type ------------------------------------------------------------ */
  --font-display: "Google Sans", "Google Sans Text", Roboto, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Google Sans Text", "Google Sans", Roboto, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-ui:      "Google Sans Text", "Google Sans", Roboto, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Google Sans Code", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
                  Consolas, monospace;
  --font-editorial: "Google Sans", "Google Sans Text", Roboto, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --fs-eyebrow: 12px;
  --fs-micro:   11px;
  --fs-tiny:    12px;
  --fs-small:   12.5px;
  --fs-base:    13.5px;
  --fs-lg:      15px;
  --fs-xl:      17px;
  --fs-2xl:     20px;

  --ds-sm:  17px;   /* display sizes — a sans, so far smaller than a condensed face */
  --ds-md:  22px;
  --ds-lg:  28px;
  --ds-xl:  38px;
  --ds-2xl: 52px;
  --ds-3xl: 72px;

  --track-eyebrow: .14em;
  --track-display: -.02em;

  /* --- space & shape --------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 80px;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(20, 24, 29, .06);
  --shadow-2: 0 6px 18px -10px rgba(20, 24, 29, .20), 0 1px 2px rgba(20, 24, 29, .06);
  --shadow-3: 0 18px 40px -26px rgba(20, 24, 29, .28), 0 2px 6px rgba(20, 24, 29, .08);
  --ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);

  --nav-w: 232px;
  --topbar-h: 56px;
  --page-max: 1480px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-1: 110ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
}

/* ============================================================================
   Dark theme — separately stepped for the dark surface, not an inverted flip.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d1014;
  --bg-deep:       #080a0d;
  --surface-1:     #14181d;   /* the validated dark chart surface */
  --surface-2:     #1a1f26;
  --surface-3:     #222831;
  --surface-hover: #262d37;
  --surface-sunken:#101318;

  --line:          #262d37;
  --line-strong:   #39424d;
  --line-faint:    #1c222a;
  --line-control:  #303845;

  --text-primary:  #eef1f5;
  --text-secondary:#a7b0bb;
  --text-muted:    #7d858f;
  --text-faint:    #656d78;
  --text-inverse:  #14181d;

  --grid:          rgba(167, 176, 187, .13);
  --axis:          rgba(167, 176, 187, .30);

  --accent:        #5087fa;
  --accent-ink:    #06122b;
  --accent-dim:    #86affd;
  --accent-text:   #86affd;
  --accent-wash:   rgba(80, 135, 250, .13);
  --accent-glow:   rgba(80, 135, 250, .22);
  --accent-soft:   #3e75eb;

  --meaning-validated: #5087fa;
  --meaning-model:     #3e75eb;
  --meaning-uncertain: #e08a1e;
  --meaning-contested: #d24c49;

  --series-1: #447be4;
  --series-2: #0fa44d;
  --series-3: #9860d0;
  --series-4: #d24c49;
  --series-5: #04a7a7;
  --series-6: #ce7c02;
  --series-7: #c84c8b;
  --series-8: #989902;
  --series-other: #7d858f;

  --div-mid: #39424d;

  --status-good:     #2f9d72;
  --status-warning:  #e6a13c;
  --status-serious:  #d2874a;
  --status-critical: #d95d5d;
  --status-good-wash:     rgba(47, 157, 114, .14);
  --status-warning-wash:  rgba(230, 161, 60, .14);
  --status-serious-wash:  rgba(210, 135, 74, .14);
  --status-critical-wash: rgba(217, 93, 93, .14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 6px 18px -10px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-3: 0 18px 40px -26px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .5);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* Follow the OS only when the viewer has not chosen. The explicit data-theme
   stamp above wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0d1014; --bg-deep: #080a0d;
    --surface-1: #14181d; --surface-2: #1a1f26; --surface-3: #222831;
    --surface-hover: #262d37; --surface-sunken: #101318;
    --line: #262d37; --line-strong: #39424d; --line-faint: #1c222a;
    --line-control: #303845;
    --text-primary: #eef1f5; --text-secondary: #a7b0bb; --text-muted: #7d858f;
    --text-faint: #656d78; --text-inverse: #14181d;
    --grid: rgba(167,176,187,.13); --axis: rgba(167,176,187,.30);
    --accent: #5087fa; --accent-ink: #06122b; --accent-dim: #86affd;
    --accent-text: #86affd; --accent-wash: rgba(80,135,250,.13);
    --accent-glow: rgba(80,135,250,.22); --accent-soft: #3e75eb;
    --meaning-validated: #5087fa; --meaning-model: #3e75eb;
    --meaning-uncertain: #e08a1e; --meaning-contested: #d24c49;
    --series-1: #447be4; --series-2: #0fa44d; --series-3: #9860d0;
    --series-4: #d24c49; --series-5: #04a7a7; --series-6: #ce7c02;
    --series-7: #c84c8b; --series-8: #989902; --series-other: #7d858f;
    --div-mid: #39424d;
    --status-good: #2f9d72; --status-warning: #e6a13c;
    --status-serious: #d2874a; --status-critical: #d95d5d;
    --status-good-wash: rgba(47,157,114,.14);
    --status-warning-wash: rgba(230,161,60,.14);
    --status-serious-wash: rgba(210,135,74,.14);
    --status-critical-wash: rgba(217,93,93,.14);
    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 6px 18px -10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
    --shadow-3: 0 18px 40px -26px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.5);
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  }
}