/* Lap Board design tokens. Dark-first. Use the variables, never raw colours, in page CSS. */
:root {
  color-scheme: dark;

  /* ---- surfaces (layered, near-black) ---- */
  --bg: #060708;
  --bg-elev: #0a0b0d;
  --surface-1: #0e1013;           /* cards */
  --surface-2: #14171b;           /* raised: hover rows, inputs, tabs track */
  --surface-3: #1b1f24;           /* pressed / selected */
  --surface-glass: rgba(10, 11, 13, 0.72);
  --overlay: rgba(3, 4, 5, 0.72);

  /* ---- hairlines ---- */
  --line: rgba(255, 255, 255, 0.065);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);

  /* ---- text ---- */
  --text: #f3f4f6;
  --text-2: #b9bec7;               /* secondary copy: 10:1 on bg (rev 8: lighter for older eyes) */
  --text-3: #9ba1ab;               /* meta, captions: 7:1 on bg, 6.3:1 on surface-3 (AA with room to spare) */
  --text-4: #464b53;
  --text-inverse: #060708;

  /* ---- the one accent (signal) ----
     ONE accent per screen (BRAND-BOOK §4): live state or the single key number/word to read. Primary buttons are WHITE
     (.btn.primary; .btn.accent renders the same). Kickers, IN SHORT boxes, glossary terms, badges, chips, card edges,
     tab indicators and "my driver" marks are NEUTRAL (my driver = team dot + bold). Never colour them with --accent. */
  --accent: #ff5236;
  --accent-hover: #ff6b52;
  --accent-soft: rgba(255, 82, 54, 0.12);
  --accent-line: rgba(255, 82, 54, 0.35);
  --accent-text: #ff7a63;

  /* ---- timing semantics (used sparingly, for data only) ---- */
  --c-fastest: #b07cff;           /* overall fastest (purple) */
  --c-personal: #3ddc84;          /* personal best (green) */
  --c-yellow: #ffd02f;            /* yellow flag / warning */
  --c-info: #5aa9ff;
  --c-up: #3ddc84;
  --c-down: #ff5d5d;
  --c-live: var(--accent);
  --c-pro: #e8d3a2;               /* champagne, for Pro marks */

  /* ---- tyres ---- */
  --tyre-soft: #ff3b3b;
  --tyre-medium: #ffd12e;
  --tyre-hard: #eceff3;
  --tyre-inter: #3fd16b;
  --tyre-wet: #3d8bff;

  /* ---- type ---- */
  --font-ui: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Barlow Condensed", "Inter Tight", ui-sans-serif, system-ui, sans-serif; /* hero headlines + wordmark (same as the videos) */

  /* rem, so the reader's own font-size setting (Android/iOS/browser) scales the whole app (revision 7, Robert).
     Body copy is 16 px at the default setting. Revision 8: the smallest READABLE text is 13 px (--fs-2xs);
     --fs-micro (11 px) is only for decorative micro labels nobody has to read (BETA tag, axis ticks on sparklines).
     Never write px font sizes in page CSS. "Text size: Large" (core/me.js) scales the root by 112.5 %. */
  --fs-micro: 0.6875rem; /* 11 px  decorative only */
  --fs-2xs: 0.8125rem;   /* 13 px  kickers, table heads, tiny labels (minimum for anything readable) */
  --fs-xs: 0.8125rem;    /* 13 px  meta, captions */
  --fs-sm: 0.875rem;     /* 14 px  dense tables, secondary lines */
  --fs-md: 1rem;         /* 16 px  body copy (minimum for paragraphs) */
  --fs-lg: 1.125rem;     /* 18 px */
  --fs-xl: 1.25rem;      /* 20 px */
  --fs-2xl: 1.5rem;      /* 24 px */
  --fs-3xl: clamp(1.625rem, 3.2vw, 2.125rem);
  --fs-4xl: clamp(2rem, 4.6vw, 3.25rem);
  --fs-display: clamp(2.5rem, 7vw, 5.75rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --track-display: -0.035em;
  --track-head: -0.022em;
  --track-kicker: 0.14em;

  /* ---- space (4px grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px;
  --gutter: clamp(16px, 3.2vw, 40px);
  --maxw: 1600px;
  --maxw-text: 720px;
  --nav-h: 60px;

  /* ---- shape ---- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- depth ---- */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 0 0 1px var(--line-2), 0 24px 60px -16px rgba(0, 0, 0, 0.85);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 0 24px -4px rgba(255, 82, 54, 0.45);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 520ms;

  /* ---- z ---- */
  --z-nav: 50;
  --z-menu: 60;
  --z-toast: 80;
  --z-tip: 90;
}

/* ---- theme helpers (dark values). Kept OUT of the first :root block on purpose: /api/brand/tokens and the video
   build parse only that block. --ink-rgb is the "white" of hover washes and tracks; it turns near-black in light. */
:root {
  --ink-rgb: 255, 255, 255;
  --text-max: #ffffff;              /* primary button hover: one step past --text */
  --nav-bg: rgb(10, 11, 13);
  --tabbar-bg: rgb(8, 9, 11);
  --tabbar-glass: rgba(8, 9, 11, 0.9);    /* tab bar with blur (phones) */
  --menu-bg: rgba(6, 7, 8, 0.97);
  --surface-hover: #101317;
  --surface-raise: #121519;
  --surface-tip: #1f2329;           /* tooltips, toasts, term pop-ups */
  --surface-menu: #111418;
  --surface-sheet: #0f1215;
  --team-shade: 0%;                 /* how much black to mix into a team colour (light: darker so a thin tick reads) */
  --theme-color: #060708;
  --accent-ink: #ff5236;            /* the one key number in red (champ-num): brand red on dark, AA red on light */
}

/* ---- LIGHT theme (4 Nov 2026). Dark stays the brand default; light follows the device (Auto) or the manual
   "Theme: Auto / Dark / Light" setting (core/me.js sets html[data-theme]; core/boot.js applies it before first paint).
   Same variable names, only colours change. Warm paper palette. Red #ff5236 stays for fills and the logo dash;
   red TEXT uses --accent-text. Keep both copies below identical. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f5f2; --bg-elev: #fbfaf8;              /* warm paper, not screen white: calmer in daylight */
    --surface-1: #ffffff; --surface-2: #efeeea; --surface-3: #e5e4df;
    --surface-glass: rgba(246, 245, 242, 0.86); --overlay: rgba(20, 21, 23, 0.42);
    --line: rgba(20, 22, 26, 0.09); --line-2: rgba(20, 22, 26, 0.14); --line-3: rgba(20, 22, 26, 0.24);
    --text: #17181b; --text-2: #3d424a; --text-3: #5c626c; --text-4: #b3b7bd; --text-inverse: #ffffff;
    /* 16:1, 9.3:1 and 5.6:1 on --bg (text-3 is 5.2:1 on surface-2: AA) */
    --accent-hover: #ec4429; --accent-soft: rgba(255, 82, 54, 0.10); --accent-line: rgba(214, 58, 32, 0.40);
    --accent-text: #b8321c;                         /* red as TEXT on light: 5.5:1 on --bg (AA). Fills keep #ff5236 */
    --c-fastest: #7d43d6; --c-personal: #13864a; --c-yellow: #8a6a00; --c-info: #2367c4; --c-up: #13864a; --c-down: #c93434; --c-pro: #8a6d2e;
    --tyre-hard: #8d939b; --tyre-medium: #c99a00;
    --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.05); --shadow-2: 0 10px 28px -14px rgba(20, 22, 26, 0.22);
    --shadow-pop: 0 0 0 1px var(--line-2), 0 18px 44px -18px rgba(20, 22, 26, 0.30);
    --ink-rgb: 20, 22, 26; --text-max: #000000;
    --nav-bg: rgb(250, 249, 247); --tabbar-bg: rgb(250, 249, 247); --tabbar-glass: rgba(250, 249, 247, 0.9); --menu-bg: rgba(246, 245, 242, 0.98);
    --surface-hover: #fbfaf8; --surface-raise: #ffffff; --surface-tip: #ffffff; --surface-menu: #ffffff; --surface-sheet: #ffffff;
    --team-shade: 28%; --theme-color: #f6f5f2;
    --hero-top: #ffffff; --hero-bot: #f1f0ec; --art-bot: #efeeea; --bg-rgb: 250, 249, 247; --accent-ink: #b8321c;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f2; --bg-elev: #fbfaf8;              /* warm paper, not screen white: calmer in daylight */
  --surface-1: #ffffff; --surface-2: #efeeea; --surface-3: #e5e4df;
  --surface-glass: rgba(246, 245, 242, 0.86); --overlay: rgba(20, 21, 23, 0.42);
  --line: rgba(20, 22, 26, 0.09); --line-2: rgba(20, 22, 26, 0.14); --line-3: rgba(20, 22, 26, 0.24);
  --text: #17181b; --text-2: #3d424a; --text-3: #5c626c; --text-4: #b3b7bd; --text-inverse: #ffffff;
  /* 16:1, 9.3:1 and 5.6:1 on --bg (text-3 is 5.2:1 on surface-2: AA) */
  --accent-hover: #ec4429; --accent-soft: rgba(255, 82, 54, 0.10); --accent-line: rgba(214, 58, 32, 0.40);
  --accent-text: #b8321c;                         /* red as TEXT on light: 5.5:1 on --bg (AA). Fills keep #ff5236 */
  --c-fastest: #7d43d6; --c-personal: #13864a; --c-yellow: #8a6a00; --c-info: #2367c4; --c-up: #13864a; --c-down: #c93434; --c-pro: #8a6d2e;
  --tyre-hard: #8d939b; --tyre-medium: #c99a00;
  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.05); --shadow-2: 0 10px 28px -14px rgba(20, 22, 26, 0.22);
  --shadow-pop: 0 0 0 1px var(--line-2), 0 18px 44px -18px rgba(20, 22, 26, 0.30);
  --ink-rgb: 20, 22, 26; --text-max: #000000;
  --nav-bg: rgb(250, 249, 247); --tabbar-bg: rgb(250, 249, 247); --tabbar-glass: rgba(250, 249, 247, 0.9); --menu-bg: rgba(246, 245, 242, 0.98);
  --surface-hover: #fbfaf8; --surface-raise: #ffffff; --surface-tip: #ffffff; --surface-menu: #ffffff; --surface-sheet: #ffffff;
  --team-shade: 28%; --theme-color: #f6f5f2;
  --hero-top: #ffffff; --hero-bot: #f1f0ec; --art-bot: #efeeea; --bg-rgb: 250, 249, 247; --accent-ink: #b8321c;
}
/* a manual Dark choice on a light device: the first block already holds every dark value */
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}