/* =====================================================================
   Backyard — design tokens. The ONLY place colors, radii, type and depth
   are defined; crew.css, shell.css and the runner screen (runner.css via
   --rn-*) read from here.

   Direction: mono, after Instagram (Juri 2026-09-29). Pure black (dark) or
   pure white (light) ground; cards have no fill, only a hairline; top and
   bottom bar are flat, in the ground colour, with a 1px line. There is NO
   accent colour: the one main action per screen is the inverted surface
   (white on black / black on white) — --accent IS that inversion, so every
   rule that used the old amber now reads black/white. Colour is semantic
   only: green = running/ok, red = delete/error; in the race the warn/info
   colours stay so the runner can tell the pacer states apart.
   Theme: Einstellungen → Darstellung, Dunkel (default) or Hell, per device
   (theme.js): <html data-theme="dark|light">. Nothing follows the phone.
   Contrast (WCAG, computed): see the table at the end of this file.
   ===================================================================== */
:root {
  color-scheme: dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ground + surfaces (dark) — cards carry no fill, only the hairline */
  --bg: #000000;
  --bg-glow: transparent;
  --surface: #000000;
  --surface-2: #262626;    /* quiet buttons, chips, inputs, segment track, bar track */
  --surface-3: #363636;    /* hover / pressed of the quiet surfaces, avatars */
  --raised: #474747;       /* selected option inside a segment control */
  --glass: #000000;        /* bars: flat, ground colour — no glass, no blur */
  --glass-edge: #262626;
  --hairline: #262626;
  --hairline-strong: #363636;

  /* text */
  --text-strong: #ffffff;  /* big numbers */
  --text: #f5f5f5;
  --text-2: #a8a8a8;
  --text-3: #969696;

  /* the inversion (main action) + semantic colors, each with a soft fill and a line */
  --accent: #ffffff;
  --accent-hover: #dbdbdb;
  --accent-ink: #000000;
  --accent-soft: rgba(255, 255, 255, 0.10);
  --accent-line: rgba(255, 255, 255, 0.32);
  --ok: #5fd39a;   --ok-soft: rgba(95, 211, 154, 0.12);  --ok-line: rgba(95, 211, 154, 0.34);
  --warn: #ffc043; --warn-soft: rgba(255, 192, 67, 0.12); --warn-line: rgba(255, 192, 67, 0.36);
  --bad: #ff6b6b;  --bad-soft: rgba(255, 107, 107, 0.12); --bad-line: rgba(255, 107, 107, 0.40);
  --info: #6fb0ff; --info-soft: rgba(111, 176, 255, 0.12); --info-line: rgba(111, 176, 255, 0.34);

  /* shape + depth + motion */
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-card: none;
  --blur: none;
  --t-fast: 0.1s ease; --t-normal: 0.15s ease-out; --t-smooth: 0.2s ease-in-out;
  --nav-h: 64px;
  --page-x: 12px;          /* side margin of the everyday pages */

  /* legacy names used across crew.css — one token system, two spellings */
  --bg-deep: var(--bg); --bg-card: var(--surface); --bg-panel: var(--surface-2); --bg-hover: var(--surface-3);
  --border: var(--hairline-strong); --border-subtle: var(--hairline);
  --text-primary: var(--text); --text-secondary: var(--text-2); --text-muted: var(--text-3);
  --accent-glow: var(--accent-soft);
  --green: var(--ok); --green-bg: var(--ok-soft);
  --yellow: var(--warn); --yellow-bg: var(--warn-soft);
  --red: var(--bad); --red-bg: var(--bad-soft);
  --blue: var(--info); --blue-bg: var(--info-soft);
  --card: var(--surface); --line: var(--hairline-strong); --txt: var(--text); --gold: var(--accent);
}

/* Hell: white ground, near-black text. Readable in direct sun. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-glow: transparent;
  --surface: #ffffff; --surface-2: #efefef; --surface-3: #e0e0e0; --raised: #d4d4d4;
  --glass: #ffffff; --glass-edge: #dbdbdb;
  --hairline: #dbdbdb; --hairline-strong: #c7c7c7;
  --text-strong: #000000; --text: #0a0a0a; --text-2: #595959; --text-3: #6b6b6b;
  --accent: #000000; --accent-hover: #262626; --accent-ink: #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.06); --accent-line: rgba(0, 0, 0, 0.30);
  --ok: #177a4c; --ok-soft: rgba(23, 122, 76, 0.09); --ok-line: rgba(23, 122, 76, 0.32);
  --warn: #8a5a00; --warn-soft: rgba(176, 116, 0, 0.11); --warn-line: rgba(176, 116, 0, 0.36);
  --bad: #c62828; --bad-soft: rgba(198, 40, 40, 0.08); --bad-line: rgba(198, 40, 40, 0.36);
  --info: #1c5dbd; --info-soft: rgba(28, 93, 189, 0.08); --info-line: rgba(28, 93, 189, 0.32);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  --shadow-card: none;
}

/* The runner screen (runner/runner.css) reads only --rn-*; here it gets the app theme. */
#page-runner .rn-root {
  --rn-bg: var(--bg);
  --rn-panel: var(--surface);
  --rn-border: var(--hairline-strong);
  --rn-text: var(--text);
  --rn-muted: var(--text-2);
  --rn-accent: var(--accent);
  --rn-ok: var(--ok);
  --rn-warn: var(--warn);
  --rn-bad: var(--bad);
  --rn-info: var(--info);
  --rn-radius: var(--radius);
  --rn-font: var(--font-display);
  --rn-mono: var(--mono);
}

/* Runner screen at night — "warmweiss-gedimmt" (Juri 2026-09-29). Dark theme only, and only
   while the runner page is shown (app.js sets body.on-runner): crew pages, Alltag and the light
   theme keep the tokens above. The whole page (head bar, runner screen, bottom bar, sheets)
   reads these, so one override dims all of it. Contrast on #000 (WCAG 2):
     text #d8d0c4 13.7 · text-2/3 #8f877b 5.9 · warn #c49530 7.7 · ok #3f9a62 6.0 · bad #c94c43 4.6
   bar #5c564d (2.9) is only the bell progress / clock bar, never text. Fills: shell.css. */
:root:not([data-theme="light"]) body.on-runner {
  --night-fg: #d8d0c4;
  --night-sub: #8f877b;
  --night-line: #1f1d1a;
  --night-bar: #5c564d;
  --text-strong: var(--night-fg); --text: var(--night-fg);
  --text-2: var(--night-sub); --text-3: var(--night-sub);
  --accent: var(--night-fg); --accent-hover: #bdb6ab; --accent-ink: #000000;
  --accent-soft: transparent; --accent-line: var(--night-line);
  --surface: #000000; --surface-2: #000000; --surface-3: #0d0c0b; --raised: #1f1d1a;
  --glass: #000000; --glass-edge: var(--night-line);
  --hairline: var(--night-line); --hairline-strong: var(--night-line);
  --ok: #3f9a62;   --ok-soft: transparent;   --ok-line: #3f9a62;
  --warn: #c49530; --warn-soft: transparent; --warn-line: #c49530;
  --bad: #c94c43;  --bad-soft: transparent;  --bad-line: #c94c43;
  --info: var(--night-fg); --info-soft: transparent; --info-line: var(--night-line);
}

/* Contrast (WCAG 2, computed 2026-09-29 — node script over these values):
                                   dark     light
   text on ground                  19.3     19.8
   text-2 on ground                 8.83     7.00
   text-3 on ground                 7.10     5.33
   text-2 on surface-2 (chips)      6.36     6.09
   text-3 on surface-2 (disabled)   5.12     4.63
   text on surface-2 (quiet btn)   13.9     17.2
   text on raised (active option)   8.52    13.4
   accent-ink on accent (main btn) 21       21
   accent-ink on accent-hover      15.2     15.1
   ok on ground                    11.3      5.35
   bad on ground                    7.57     5.62
   warn on ground                  12.9      5.93
   NOT ALLOWED (below 4.5 — never combine these):
   text-2 on raised                 3.91     4.73   → the selected segment option always uses --text
   text-3 on surface-3              4.09     4.04   → no --text-3 on hover/pressed/avatar surfaces */