/*
 * GenSet Data design tokens (docs/DESIGN.md section 3). The one token set for the console, the
 * portals, the public site and the dataset card: no screen defines its own colours, sizes or fonts.
 * Each colour is defined once with light-dark(); `color-scheme` lets the reader's system choose.
 * The values are DESIGN's rendered reference values; tests/site/test_interim_page.py checks every
 * colour here against the tables in DESIGN 3.1, so a change starts in DESIGN.
 * apps/site/interim/tokens.css is a byte-identical copy (the interim page is uploaded as a folder).
 */

:root {
  color-scheme: light dark;

  /* Neutrals and the one accent (DESIGN 3.1) */
  --bg: light-dark(#f4f6f8, #131a21);
  --surface: light-dark(#ffffff, #1b242e);
  --surface-raised: light-dark(#ffffff, #222d39);
  --line: light-dark(#d9dee4, #2e3a47);
  --line-strong: light-dark(#aeb7c2, #4a5867);
  --ink: light-dark(#1b2733, #e8edf2);
  --ink-2: light-dark(#4c5a68, #aeb9c4);
  --ink-3: light-dark(#7b8793, #7e8a96);
  --accent: light-dark(#0c6e73, #3fb8be);
  --accent-ink: light-dark(#ffffff, #0b1418);
  --accent-soft: light-dark(#dceff0, #163538);

  /* State colours: only for state, always with an icon or text (DESIGN 3.1) */
  --ok: light-dark(#1e7f4f, #4cc38a);
  --warn: light-dark(#a86a00, #f2b84b);
  --fail: light-dark(#b23a3a, #f07878);
  --hold: light-dark(#6a3fb5, #b59af0);
  --inference: light-dark(#5b6b7c, #8e9eaf);
  --running: light-dark(#2b63c7, #7fa9f0);

  /* Type (DESIGN 3.2): one sans, one mono for machine identifiers */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 0.786rem;
  --t-sm: 0.857rem;
  --t-md: 1rem;
  --t-lg: 1.143rem;
  --t-xl: 1.429rem;
  --t-2xl: 2rem;
  --t-3xl: 3rem;

  /* Space (DESIGN 3.3) */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;

  /* Radius and motion (DESIGN 3.3) */
  --r-sm: 3px;
  --r-md: 6px;
  --dur-fast: 120ms;
  --dur: 200ms;
}