/* QuotaLens design tokens: "Bench"
   Dark is the default. Light applies only when the OS asks for it or the
   user toggles. Theme values use light-dark(light, dark), which follows
   `color-scheme`, so the whole palette is declared once.
   Requires Chrome 123+ / Safari 17.5+ / Firefox 120+. */

:root {
  color-scheme: dark;

  /* ── type ───────────────────────────────────────────────────────── */
  --font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Liberation Mono", Menlo, Consolas, monospace;

  --fs-readout: clamp(48px, 7vw, 68px);  /* burn rate. one per screen. */
  --fs-metric: 28px;                      /* window percentages */
  --fs-sub: 18px;                         /* secondary readouts */
  --fs-lg: 15px;
  --fs-md: 13px;                          /* body + table default */
  --fs-sm: 12px;                          /* labels */
  --fs-xs: 11px;                          /* axis ticks, units, meta */

  --lh-num: 1;
  --lh-txt: 1.45;
  --lh-row: 1.3;
  --tr-readout: -0.025em;
  --tr-label: 0.01em;
  --w-reg: 400;
  --w-med: 500;
  --w-bold: 600;

  /* ── space: 4px grid ────────────────────────────────────────────── */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --row-h: 28px;        /* comfortable table row */
  --row-h-tight: 24px;  /* compact density */
  --gutter: 20px;
  --maxw: 1320px;

  /* ── shape: radius is capped at 3px on purpose. no shadows. ─────── */
  --r-1: 2px;
  --r-2: 3px;
  --hair: 1px;
  --inset-b: 1px;   /* the recess that marks a data surface */

  /* ── motion ─────────────────────────────────────────────────────── */
  --dur: 120ms;
  --ease: cubic-bezier(.2,0,.2,1);

  /* ── surfaces ───────────────────────────────────────────────────── */
  /* Rule: the screen is the extreme of the value range (darkest in dark,
     lightest in light). Chrome sits one step toward mid-grey. */
  --case:      light-dark(#E4E6E5, #14181A);  /* page ground = the housing */
  --chrome:    light-dark(#DBDEDD, #191E20);  /* header, toolbar, thead     */
  --screen:    light-dark(#FAFBFA, #0C0F10);  /* any surface plotting data  */
  --hairline:  light-dark(#C9CDCC, #262C2E);
  --hair-firm: light-dark(#AEB4B3, #333A3C);
  --grid:      light-dark(#E7EAE9, #1B2123);  /* chart gridlines            */
  --grid-zero: light-dark(#CBD0CF, #2C3436);  /* baseline / axis            */

  /* ── text ───────────────────────────────────────────────────────── */
  --txt:     light-dark(#171A1B, #D5DBDB);
  --txt-dim: light-dark(#5A6262, #8B9495);
  --txt-far: light-dark(#808887, #626A6B);   /* units, ticks, disabled     */

  /* ── the one lit colour ─────────────────────────────────────────── */
  /* Amber means "rate" and nothing else. Chrome must never use it. */
  --lit: light-dark(#8A5B00, #F2B33D);

  /* ── states ─────────────────────────────────────────────────────── */
  /* Magnitude states colour the VALUE. Epistemic states colour the FRAME
     and remove the value. Never style stale/auth on the amber→red ramp. */
  --st-elevated: light-dark(#8A5B00, #F2B33D);  /* = --lit, deliberately   */
  --st-critical: light-dark(#B3242B, #F0575C);
  --st-stale:    light-dark(#5F6969, #7C8894);
  --st-auth:     light-dark(#5A3FB0, #A78BFA);
  /* "normal" has no colour: it is the absence of a chip. --st-ok exists
     only for a connection dot that also carries a text label. Do not use
     it as a status fill; red/green must never carry meaning alone. */
  --st-ok:       light-dark(#00694A, #3FBF8F);

  --st-elevated-bg: light-dark(rgba(138,91,0,.12),  rgba(242,179,61,.14));
  --st-critical-bg: light-dark(rgba(179,36,43,.10), rgba(240,87,92,.14));
  --st-stale-bg:    light-dark(rgba(95,105,105,.10),rgba(124,136,148,.13));
  --st-auth-bg:     light-dark(rgba(90,63,176,.10), rgba(167,139,250,.14));

  /* ── chart series ───────────────────────────────────────────────── */
  /* Derived from Okabe-Ito, chosen for deuteranopia. Slot 1 is always the
     5-hour window / burn rate, so it is the same amber as the readout.
     Colour is never the only channel: --dash-N and an end-of-line label
     are mandatory, not optional. */
  --s1: light-dark(#A66A00, #F2B33D);  /* 5-hour window / burn rate */
  --s2: light-dark(#0E6E9C, #7FCDEF);  /* 7-day window              */
  --s3: light-dark(#00704E, #4FC08A);  /* 7-day Sonnet              */
  --s4: light-dark(#2A4FA0, #6E9BE8);  /* per-model limit           */
  --s5: light-dark(#A32C6A, #DE79AC);  /* per-model limit           */
  --s6: light-dark(#5F42A8, #B9A0E8);  /* per-project trace / other */

  --s1-soft: light-dark(rgba(166,106,0,.13), rgba(242,179,61,.15));
  --s2-soft: light-dark(rgba(14,110,156,.13), rgba(127,205,239,.15));
  --s3-soft: light-dark(rgba(0,112,78,.13),   rgba(79,192,138,.15));
  --s4-soft: light-dark(rgba(42,79,160,.13),  rgba(110,155,232,.15));
  --s5-soft: light-dark(rgba(163,44,106,.13), rgba(222,121,172,.15));
  --s6-soft: light-dark(rgba(95,66,168,.13),  rgba(185,160,232,.15));

  --dash-1: none;        /* solid, heaviest, the hero trace */
  --dash-2: none;        /* solid, lighter                   */
  --dash-3: 7 3;
  --dash-4: 2 3;
  --dash-5: 10 3 2 3;
  --dash-6: 4 4;

  --trace-hero: 2.5px;
  --trace: 2px;
  --trace-dim: 1.5px;
  --trace-ghost: 1px;    /* local-token overlay: shares the timeline, not the unit */

  /* ── interaction ────────────────────────────────────────────────── */
  --focus: light-dark(#0E6E9C, #7FCDEF);
  --focus-w: 2px;
  --focus-off: 2px;
  --hover: light-dark(rgba(23,26,27,.05), rgba(213,219,219,.05));
  --select: light-dark(rgba(14,110,156,.16), rgba(127,205,239,.18));
}

/* Follow the OS when it asks for light; the toggle overrides both. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}