/* Design tokens of arx-free (v0.2.0). Colours, sizes and type live here so that fine-tuning never touches the
   components. Meaning of the fixed colours (docs/ui-spec.md): eccentric = red, concentric = ink, reference = grey,
   better = green, worse = yellow, about the same = ink. The accent is petrol - none of the colours with a meaning. */
:root {
  --paper: #f3f0e9;            /* page background: warm, hides fingerprints better than black */
  --surface: #fffdf8;          /* cards */
  --surface-2: #ebe7dd;        /* wells, inactive controls */
  --line: #d9d4c7;
  --ink: #16181b;
  --ink-2: #4a4d52;            /* secondary text */
  --ink-3: #85878a;            /* hints */
  --accent: #0d5c63;           /* petrol */
  --accent-ink: #ffffff;
  --accent-soft: #d6e8e8;
  --eccentric: #c4302b;
  --concentric: #16181b;
  --reference: #a9a59b;
  --better: #1e8449;
  --worse: #d4a106;
  --same: #16181b;
  --ok: #1e8449;
  --attention: #d4a106;
  --danger: #c4302b;
  --stop: #c4302b;
  --stop-ink: #ffffff;
  --start-marker: #1e8449;     /* Start = green, End = red (owner 2026-09-21: more intuitive) - on rail, table and graphic */
  --end-marker: #c4302b;
  --go: #1e8449;               /* the forward action, always bottom right */
  --go-ink: #ffffff;
  --back: #c4302b;             /* the way back / exit, always bottom left */
  --caution: #d4a106;
  --highlight: #fbf0c4;        /* highlighted table row (reference set) */
  --exercise: #2b62c2;         /* the CURRENT exercise in the header's frame (owner 2026-09-23: "a different colour, blue") */
  --headline: #2b62c2;         /* the colour rule (owner 2026-09-25): red = stop / cancel / end, green = start / set / confirm,
                                  blue = headlines and visual highlights that are no buttons (docs/ui-spec.md) */
  --bar: #16181b;              /* header and title bars */
  --pict-machine: #c9c4b8;     /* pictograms: the machine weak, the figure black, the cable in the accent colour */
  --pict-figure: #16181b;
  --pict-cable: #0d5c63;
  --bar-ink: #fffdf8;

  --radius: 16px;
  --radius-small: 10px;
  --space-in: 8px;             /* gap inside a group - always clearly smaller than ... */
  --space-group: 24px;         /* ... the gap between groups ... */
  --space-section: 36px;       /* ... and between sections */
  --footer: 104px;
  --shadow: 0 1px 2px rgba(22, 24, 27, .06), 0 8px 24px rgba(22, 24, 27, .06);
  --gap: 20px;
  --touch: 72px;               /* primary touch target */
  --touch-small: 56px;         /* secondary touch target */
  --stopbar: 168px;            /* the stop bar is at least 160 px in every motion state */
  --header: 84px;

  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --size-hero: clamp(72px, 9vw, 168px);
  --size-number: clamp(40px, 3.6vw, 68px);
  --size-title: clamp(30px, 2.4vw, 44px);
  --size-large: clamp(22px, 1.5vw, 28px);
  --size-body: clamp(18px, 1.15vw, 22px);
  --size-small: clamp(15px, .95vw, 18px);
}

[data-theme="dark"] {
  --paper: #121416;
  --surface: #1b1e21;
  --surface-2: #24282c;
  --line: #33383d;
  --ink: #f2efe8;
  --ink-2: #b9b7b0;
  --ink-3: #85878a;
  --accent: #3fb3bd;
  --accent-ink: #0c1113;
  --accent-soft: #173438;
  --concentric: #f2efe8;
  --same: #f2efe8;
  --reference: #6f6c65;
  --highlight: #4a4013;
  --bar: #000000;
  --pict-machine: #4a4f55;
  --pict-figure: #f2efe8;
  --pict-cable: #3fb3bd;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}