/* The ONE token set (design C "Logbook", round 204). Every colour is a custom
   property, so the theme x mode machinery (js/lib/scheme.js) only flips two
   attributes on <html>:
     data-mode="light" | "dark"                 paper | asphalt
     data-theme="default" | "contrast" | "livery"
   A livery writes its primary colours inline (CHROME_VARS in
   js/lib/scheme_values.js); the [data-theme='livery'] block derives the
   secondary ones from them. A page without data-mode (the static pages, which
   load no scheme script) keeps the dark look it always had. */

:root {
  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-22: 1.375rem; --fs-28: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
  --fs-40: clamp(1.875rem, 1.3rem + 2.4vw, 2.5rem);
  --fs-56: clamp(2.25rem, 1.4rem + 3.8vw, 3.5rem);
  --lh-tight: 1.08; --lh-body: 1.5;
  --track-eyebrow: 0.16em;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --measure: 1180px;

  /* radii + motion + hit size */
  --r-1: 6px; --r-2: 12px; --r-3: 18px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --tap: 44px;

  /* Layout offsets. The public top bar (#topnav) is the default; the signed-in
     shell (html.app-shell, css/shell.css) swaps in the rail or its own bar.
     Everything fixed or full-height reads these two, never a literal. */
  --topbar-h: 56px;
  --rail-w: 0px;

  /* ---- light "paper" ---- */
  --bg: #f5f2ec;
  --surface: #fffdf9;
  --surface-2: #efeae1;
  --line: #ddd5c8;
  --line-strong: #b5a996;
  --text: #1b1916;
  --text-2: #5d574e;
  --text-3: #6f675d;
  --accent: #ff8a2a;
  --accent-ink: #a94700;
  --on-accent: #1b1107;
  --accent-soft: #ff8a2a24;
  --good: #1e7a50;
  --good-soft: #dff1e7;
  --danger: #b3261e;
  --danger-soft: #fbe3df;
  --on-danger: #fff;
  --focus: #1b1916;
  --scrim: #1b19168c;
  --shadow: 0 1px 2px #1b19160f, 0 8px 24px #1b191614;
  --shadow-float: 0 2px 6px #1b19161a, 0 18px 40px #1b191624;
  --map-chrome: #fffdf9f2;
  --route: #ff8a2a;
  --route-casing: #7a3200;
  --shape: #1b1916;
  --chart-grid: #ddd5c8;
  --speed-1: #2f8f5b; --speed-2: #f2b233; --speed-3: #d8412f;
  --surf-paved: #6b7a8c; --surf-gravel: #b08530; --surf-dirt: #a0522d; --surf-unknown: #7a4a2a;
  --knob-on: var(--surface);
  --knob-shadow: #00000044;
  --seg-shadow: #0000001f;
  --drop: #00000066;
  --marker-fill: #fff;
  --attrib-bg: #fffdf9cc;
  --attrib-text: #5d574e;
  --attrib-link: #1b1916;
  color-scheme: light;
}

/* ---- dark "asphalt" (also the look of a page that sets no mode) ---- */
:root[data-mode='dark'],
:root:not([data-mode]) {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #0b0e12;
  --line: #2a313b;
  --line-strong: #46505d;
  --text: #eef1f4;
  --text-2: #a3adb8;
  --text-3: #8a95a1;
  --accent-ink: #ffa05a;
  --accent-soft: #ff8a2a2b;
  --good: #4cc38a;
  --good-soft: #143325;
  --danger: #ff6b62;
  --danger-soft: #3a1a18;
  --on-danger: #1b0907;
  --focus: #ffd2ad;
  --scrim: #000000a6;
  --shadow: 0 1px 2px #0000004d, 0 8px 24px #00000059;
  --shadow-float: 0 2px 6px #00000066, 0 18px 40px #00000080;
  --map-chrome: #171b21f2;
  --route-casing: #1b0d02;
  --shape: #eef1f4;
  --chart-grid: #2a313b;
  --speed-1: #4cc38a; --speed-2: #f2c14e; --speed-3: #ff6b62;
  --surf-paved: #8fa0b3; --surf-gravel: #d2a651; --surf-dirt: #cf7b4c; --surf-unknown: #a57551;
  --knob-on: #fff;
  --knob-shadow: #00000066;
  --seg-shadow: #00000059;
  --drop: #000000a6;
  --attrib-bg: #171b21cc;
  --attrib-text: #a3adb8;
  --attrib-link: #cfd6de;
  color-scheme: dark;
}

/* ---- High contrast (the existing `contrast` theme) ---- */
:root[data-theme='contrast'][data-mode='light'] {
  --bg: #fff; --surface: #fff; --surface-2: #f0f0f0;
  --line: #000; --line-strong: #000;
  --text: #000; --text-2: #1a1a1a; --text-3: #2b2b2b;
  --accent: #b34700; --accent-ink: #7a3000; --on-accent: #fff; --accent-soft: #ffe2cc;
  --good: #005a2e; --danger: #a00000; --danger-soft: #ffe0e0;
  --focus: #0033cc;
  --map-chrome: #fff; --shape: #000; --route: #b34700; --route-casing: #000;
  --surf-paved: #000; --surf-gravel: #6b6b6b; --surf-dirt: #b34700; --surf-unknown: #7a3000;
  --speed-1: #005a2e; --speed-2: #8a5a00; --speed-3: #a00000;
  --attrib-bg: #fff; --attrib-text: #000; --attrib-link: #000;
}
:root[data-theme='contrast'][data-mode='dark'] {
  --bg: #000; --surface: #000; --surface-2: #111;
  --line: #fff; --line-strong: #fff;
  --text: #fff; --text-2: #f0f0f0; --text-3: #ddd;
  --accent: #ffb066; --accent-ink: #ffb066; --on-accent: #000; --accent-soft: #3a2410;
  --good: #7dffb5; --danger: #ff8a80; --danger-soft: #2a0000;
  --focus: #ffff00;
  --map-chrome: #000; --shape: #fff; --route: #ffb066; --route-casing: #000;
  --surf-paved: #fff; --surf-gravel: #9a9a9a; --surf-dirt: #ffb066; --surf-unknown: #ff8a80;
  --speed-1: #7dffb5; --speed-2: #ffe066; --speed-3: #ff8a80;
  --attrib-bg: #000; --attrib-text: #fff; --attrib-link: #ffff00;
}

/* ---- Liveries: primaries arrive inline, the rest follows from them ---- */
:root[data-theme='livery'] {
  --line-strong: color-mix(in srgb, var(--line) 55%, var(--text));
  --text-3: color-mix(in srgb, var(--text-2) 85%, var(--bg));
  --good-soft: color-mix(in srgb, var(--good) 18%, var(--bg));
  --focus: var(--text);
  --map-chrome: color-mix(in srgb, var(--surface) 95%, transparent);
  --route: var(--accent);
  --shape: var(--text);
  --chart-grid: var(--line);
  --attrib-bg: color-mix(in srgb, var(--surface) 80%, transparent);
  --attrib-text: var(--text-2);
  --attrib-link: var(--text);
}

/* ---- The public look: landing, features, privacy, impressum, credits, 404,
   /s/ /r/ /i/ /f/ /live/ /get and every signed-out view keep the pre-204
   palette (round-204 brief: only signed-in app views get design C). Built-in
   theme and HC alike, as before; a livery still writes its colours inline and
   wins. html.app-shell (css/shell.css) is the signed-in app. */
:root:not(.app-shell):not([data-mode='light']) {
  --bg: #0d1117; --surface: #151c24; --surface-2: #0a0e13;
  --line: #2a3441; --text: #e9eef4; --text-2: #8b98a6;
  --accent: #ff8a2a; --accent-ink: #ff8a2a; --accent-soft: #ff8a2a26; --on-accent: #1a1006;
  --good: #4cc38a; --danger: #ff6b62; --danger-soft: #58201d;
}
:root:not(.app-shell)[data-mode='light'] {
  --bg: #f4f6f8; --surface: #ffffff; --surface-2: #e7ebf0;
  --line: #c2cbd6; --text: #101720; --text-2: #4c5866;
  --accent: #ff8a2a; --accent-ink: #ff8a2a; --accent-soft: #ff8a2a26; --on-accent: #1a1006;
  --good: #1e7a50; --danger: #c0281f; --danger-soft: #fde3e1;
}