/* Recur design tokens — ONE file for the website and the desktop app (goal F,
   DF-4). resources/public/css/tokens.css must be byte-identical (a test checks).
   Light by default; dark when the operating system prefers it. Colours are only
   ever named here — no raw colour anywhere else (a lint test checks the app). */
:root {
  /* colour — light */
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-2: #eef2f2;
  --border: #d6dee0;
  --text: #15202a;
  --text-muted: #55616a;
  --accent: #0d7f78;
  --accent-text: #0b6b65;
  --on-accent: #ffffff;
  --ok: #1d7a45;
  --warn: #9a5800;
  --danger: #b42318;
  --focus: #0d7f78;
  --shadow: 0 1px 2px rgba(16, 32, 42, .06), 0 2px 8px rgba(16, 32, 42, .05);

  /* type — 12 / 14 / 16 / 20 / 32 */
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-title: 16px;
  --fs-headline: 20px;
  --fs-figure: 32px;
  --lh: 1.45;

  /* space — a 4 px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --radius: 12px;
  --radius-sm: 8px;
  --motion: 180ms ease;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11181f;
    --surface: #1a232c;
    --surface-2: #151d25;
    --border: #2a3744;
    --text: #e7eaea;
    --text-muted: #a9b4b8;
    --accent: #2bb3ab;
    --accent-text: #4fd1c8;
    --on-accent: #062220;
    --ok: #7bc86c;
    --warn: #e6a44d;
    --danger: #f2877d;
    --focus: #4fd1c8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms linear; }
}