/* ==========================================================================
   tokens.css — the single source of truth for color, type, space and motion.
   Dark is the designed default; light is a selected second theme (not a flip).
   Series + heat ramps are validated with the data-viz palette validator:
     dark  surface #101317 · light surface #ffffff · all checks PASS
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- planes ---------------------------------------------------------- */
  --plane:        #07080a;
  --surface-1:    #101317;   /* cards, chart surface */
  --surface-2:    #171b21;   /* raised: inputs, menus */
  --surface-3:    #1e232b;   /* hover / pressed */
  --hairline:     rgba(255,255,255,.075);
  --hairline-str: rgba(255,255,255,.14);

  /* --- ink ------------------------------------------------------------- */
  --ink:          #f3f5f7;
  --ink-2:        #a9b0b8;
  --ink-3:        #6d757e;
  --ink-4:        #4a5158;

  /* --- accent (overridden by [data-accent]) ---------------------------- */
  --accent:       #2bd9ae;
  --accent-ink:   #04140f;
  --accent-soft:  color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-line:  color-mix(in oklab, var(--accent) 34%, transparent);

  /* --- status (fixed, never themed) ------------------------------------ */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  /* --- chart chrome ----------------------------------------------------- */
  --grid:     #22262c;
  --axis:     #2f343b;
  --muted:    #898781;

  /* --- categorical series (validated dark steps) ------------------------ */
  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
  --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

  /* --- sequential heat ramp (one hue, monotone L, near-zero recedes) ---- */
  --h0: #16191e;  /* no data / empty cell — neutral track, not the hue */
  --h1: #0f3b38;
  --h2: #13655a;
  --h3: #189a7e;
  --h4: #2ac79e;
  --h5: #7af0d0;

  /* --- type ------------------------------------------------------------- */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-micro: .625rem;   /* 10px — uppercase eyebrow labels */
  --fs-xs:    .6875rem;  /* 11px */
  --fs-sm:    .8125rem;  /* 13px */
  --fs-base:  .875rem;   /* 14px */
  --fs-md:    1rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.75rem;
  --fs-hero:  clamp(3rem, 9vw, 4.5rem);

  /* --- space / shape / motion ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 120ms;
  --med:  220ms;
  --slow: 420ms;

  --rail-w: 232px;
  --maxw: 1320px;
}

/* ---- accent presets ------------------------------------------------------ */
:root[data-accent="mint"]    { --accent:#2bd9ae; --accent-ink:#04140f; }
:root[data-accent="cyan"]    { --accent:#38bdf8; --accent-ink:#04141f; }
:root[data-accent="indigo"]  { --accent:#9085e9; --accent-ink:#0b0820; }
:root[data-accent="amber"]   { --accent:#f0b429; --accent-ink:#1a1203; }
:root[data-accent="magenta"] { --accent:#f472b6; --accent-ink:#1d0712; }
:root[data-accent="bone"]    { --accent:#e8e6df; --accent-ink:#0b0b0b; }

/* ==========================================================================
   Light theme — stepped for a white surface, declared under both scopes so an
   explicit toggle wins over the OS setting in either direction.
   ========================================================================== */
@media (prefers-color-scheme: light) {
  :root:where(:not([data-theme="dark"])) {
    color-scheme: light;
    --plane:#f4f5f4; --surface-1:#ffffff; --surface-2:#fafaf9; --surface-3:#f0f0ee;
    --hairline:rgba(11,11,11,.10); --hairline-str:rgba(11,11,11,.20);
    --ink:#0b0e11; --ink-2:#52575e; --ink-3:#7e848c; --ink-4:#a5abb2;
    --grid:#e7e8e4; --axis:#c9cbc5; --muted:#767974;
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
    --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
    --h0:#f1f2f0; --h1:#bdeee2; --h2:#7edcc4; --h3:#38bca0; --h4:#13907a; --h5:#0a6354;
  }
  :root:where(:not([data-theme="dark"]))[data-accent="mint"]    { --accent:#0f9e7d; --accent-ink:#ffffff; }
  :root:where(:not([data-theme="dark"]))[data-accent="cyan"]    { --accent:#0b7fb8; --accent-ink:#ffffff; }
  :root:where(:not([data-theme="dark"]))[data-accent="indigo"]  { --accent:#4a3aa7; --accent-ink:#ffffff; }
  :root:where(:not([data-theme="dark"]))[data-accent="amber"]   { --accent:#9a6c00; --accent-ink:#ffffff; }
  :root:where(:not([data-theme="dark"]))[data-accent="magenta"] { --accent:#be3f7f; --accent-ink:#ffffff; }
  :root:where(:not([data-theme="dark"]))[data-accent="bone"]    { --accent:#3b3a35; --accent-ink:#ffffff; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --plane:#f4f5f4; --surface-1:#ffffff; --surface-2:#fafaf9; --surface-3:#f0f0ee;
  --hairline:rgba(11,11,11,.10); --hairline-str:rgba(11,11,11,.20);
  --ink:#0b0e11; --ink-2:#52575e; --ink-3:#7e848c; --ink-4:#a5abb2;
  --grid:#e7e8e4; --axis:#c9cbc5; --muted:#767974;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --h0:#f1f2f0; --h1:#bdeee2; --h2:#7edcc4; --h3:#38bca0; --h4:#13907a; --h5:#0a6354;
}
:root[data-theme="light"][data-accent="mint"]    { --accent:#0f9e7d; --accent-ink:#fff; }
:root[data-theme="light"][data-accent="cyan"]    { --accent:#0b7fb8; --accent-ink:#fff; }
:root[data-theme="light"][data-accent="indigo"]  { --accent:#4a3aa7; --accent-ink:#fff; }
:root[data-theme="light"][data-accent="amber"]   { --accent:#9a6c00; --accent-ink:#fff; }
:root[data-theme="light"][data-accent="magenta"] { --accent:#be3f7f; --accent-ink:#fff; }
:root[data-theme="light"][data-accent="bone"]    { --accent:#3b3a35; --accent-ink:#fff; }