/* Blotter design tokens — GENERATED, do not edit by hand.
 *
 * Source: packages/tokens/src/index.ts in the Blotter repo, which lifts
 * these verbatim from the approved prototype. Regenerate with
 *   node tools/build-tokens.mjs [path/to/index.ts]
 *
 * The severity stripe widens as rank climbs, so severity is legible in
 * greyscale and to a colour-blind reader rather than being carried by
 * hue alone. Use both: var(--s4) for the colour, var(--stripe-4) for
 * the width.
 */

:root {
  --bg: #111827;
  --surface: #202b42;
  --surface2: #172238;
  --line: #2b3955;
  --line2: #465a7c;
  --text: #e9e9ed;
  --muted: rgba(239,244,255,0.76);
  --faint: rgba(222,232,252,0.66);
  --accent: #548cff;
  --accent-t: #a9c7ff;
  --accent-w: #385f9f;
  --plus: #d9a441;
  --plus-t: #f0c473;
  --plus-w: #5c4620;
  --ok: #35d67f;
  --ok-t: #0f2d1e;
  --ok-ink: #7ceaad;
  --s5: #f5918c;
  --s4: #fb923c;
  --s3: #e8c463;
  --s2: #5fd394;
  --s1: #7fb2e8;
  --s0: #75798c;
  --unit: #84ddf0;
  --unit-bg: #12303a;
  --t5: #3a211c;
  --i5: #ffb3ab;
  --e5: #7a3a33;
  --t4: #3a2a16;
  --i4: #ffc08c;
  --e4: #7d5224;
  --t3: #332b12;
  --i3: #f2d07e;
  --e3: #6e5c22;
  --t2: #153021;
  --i2: #84e2ac;
  --e2: #2d6444;
  --t1: #16283f;
  --i1: #a9cdf5;
  --e1: #2d4d75;
  --t0: #292b31;
  --i0: #c9c1b1;
  --e0: #423d33;
  --tp: #2a2440;
  --ip: #ccbaff;
  --ep: #4d4180;
  --bar1: #22406e;
  --bar2: #35619f;
  --bar3: #4d84d6;
  --map: #1b1d2b;
  --grid: rgba(147,151,171,0.13);

  --stripe-5: 7px;
  --stripe-4: 6px;
  --stripe-3: 5px;
  --stripe-2: 4px;
  --stripe-1: 3px;
  --stripe-0: 2px;

  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}

:root[data-theme="light"] {
  --bg: #f2f4fb;
  --surface: #ffffff;
  --surface2: #e7eaf6;
  --line: #d3d8ea;
  --line2: #a8aec6;
  --text: #1a1c26;
  --muted: #454a5c;
  --faint: #5c6274;
  --accent: #2358c9;
  --accent-t: #1b47a4;
  --accent-w: #bfd3f4;
  --plus: #9a6b12;
  --plus-t: #7d560c;
  --plus-w: #ebd9ac;
  --ok: #0b7a3d;
  --ok-t: #d6f0e0;
  --ok-ink: #0a6634;
  --s5: #b91c1c;
  --s4: #c2410c;
  --s3: #9a5c06;
  --s2: #166534;
  --s1: #1d5a96;
  --s0: #8b8fa3;
  --unit: #0e6070;
  --unit-bg: #d8eaee;
  --t5: #fbe3de;
  --i5: #992119;
  --e5: #f0b6ac;
  --t4: #fbe8d5;
  --i4: #8c3409;
  --e4: #eec296;
  --t3: #f7efc9;
  --i3: #6e4e05;
  --e3: #e2d290;
  --t2: #deebd8;
  --i2: #155c2b;
  --e2: #a8cca0;
  --t1: #dbe8f7;
  --i1: #16456f;
  --e1: #a6c4e4;
  --t0: #edeef7;
  --i0: #4a4d5c;
  --e0: #d3d7e6;
  --tp: #e8e2f7;
  --ip: #5f22be;
  --ep: #c0b0e8;
  --bar1: #cfdcf5;
  --bar2: #8fb0e4;
  --bar3: #4f80d2;
  --map: #e7e9f6;
  --grid: rgba(60,66,100,0.15);
}

/* Readers who have asked their system for light, and not overridden it
   on the site itself. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #f2f4fb;
    --surface: #ffffff;
    --surface2: #e7eaf6;
    --line: #d3d8ea;
    --line2: #a8aec6;
    --text: #1a1c26;
    --muted: #454a5c;
    --faint: #5c6274;
    --accent: #2358c9;
    --accent-t: #1b47a4;
    --accent-w: #bfd3f4;
    --plus: #9a6b12;
    --plus-t: #7d560c;
    --plus-w: #ebd9ac;
    --ok: #0b7a3d;
    --ok-t: #d6f0e0;
    --ok-ink: #0a6634;
    --s5: #b91c1c;
    --s4: #c2410c;
    --s3: #9a5c06;
    --s2: #166534;
    --s1: #1d5a96;
    --s0: #8b8fa3;
    --unit: #0e6070;
    --unit-bg: #d8eaee;
    --t5: #fbe3de;
    --i5: #992119;
    --e5: #f0b6ac;
    --t4: #fbe8d5;
    --i4: #8c3409;
    --e4: #eec296;
    --t3: #f7efc9;
    --i3: #6e4e05;
    --e3: #e2d290;
    --t2: #deebd8;
    --i2: #155c2b;
    --e2: #a8cca0;
    --t1: #dbe8f7;
    --i1: #16456f;
    --e1: #a6c4e4;
    --t0: #edeef7;
    --i0: #4a4d5c;
    --e0: #d3d7e6;
    --tp: #e8e2f7;
    --ip: #5f22be;
    --ep: #c0b0e8;
    --bar1: #cfdcf5;
    --bar2: #8fb0e4;
    --bar3: #4f80d2;
    --map: #e7e9f6;
    --grid: rgba(60,66,100,0.15);
  }
}