/* ========================================================================== theme.css — design tokens for the signed-in pages (mina, coach, tracking). Loaded FIRST on all three pages, before any other stylesheet. Dark (default) = index.html :root, token for token (same names, same values). Light = @media (prefers-color-scheme: light), per decision D5. Every ratio quoted here is computed by design-tools/contrast.py (WCAG 2.1). ========================================================================== */ :root { color-scheme: dark light; /* ── index.html tokens, copied verbatim ─────────────────────────────── */ --bg: #0c0b0a; --panel: #151311; --panel-2: #1c1916; --line: #2e2824; --text: #eee; /* 16.95 on bg, 15.97 on panel */ --muted: #a0978f; /* 6.85 on bg, 6.46 on panel, 6.10 on panel-2 */ --dim: #857c74; /* 4.53 on panel: captions only, never body text */ --orange: #ff5f1f; /* fills, underline, focus ring, eyebrow (6.47 on bg) */ --orange-hi: #ff7a42; --orange-text: #ff8a57; /* 8.45 on bg, 7.96 on panel */ --display: 'Kanit', system-ui, sans-serif; --green: #4CAF50; /* semantic only (tracking active, verified) */ --green-text: #8fd18f; /* 10.31 on panel */ --blue: #8ab4ff; /* 8.87 on panel */ --red: #e57373; /* 6.21 on panel */ --yellow: #e8d24a; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── New tokens (each one defined once, here) ───────────────────────── */ --text-strong: #fff; /* headings + "MX" of the wordmark, as index (#fff) */ --text-soft: #d6cfc8; /* coaching body text, 12.02 on panel */ --yellow-text: var(--yellow); /* "Processing" pill, 12.13 on panel */ --eyebrow: var(--orange); /* index: .eyebrow is --orange */ --wordmark-accent: var(--orange); /* "Enduro"; 5.43 on the coach bar over white tiles */ --on-orange: #0c0b0a; /* label on --orange: 6.47 (index's white is 3.04, fails; K5) */ --field-line: #7a7069; /* input border: 3.84 vs panel, 4.07 vs input fill (A2) */ --focus: var(--orange); /* focus ring: 6.47 vs bg, 6.10 vs panel (A2) */ --accent-line: var(--orange); /* selected tab underline, 6.47 vs bg (A2) */ --best: #FFD700; /* lap panel best row, 13.21 on panel (ride-track.js colour) */ --bar-bg: rgba(12, 11, 10, .96); /* sticky top bars (mina + coach) */ --bar-line: #201c19; /* index .topbar border */ --chrome-bg: rgba(21, 19, 17, .94); /* floating map panels = --panel @ .94 */ --tint-orange: rgba(255, 95, 31, .10); /* own rows, flash, beta-note */ --tint-orange-strong: rgba(255, 95, 31, .16); /* selected lap row */ --tint-red: rgba(229, 115, 115, .12); /* error states */ --shadow: 0 8px 24px rgba(0, 0, 0, .45); /* Lifts small glyphs drawn on the map (gate marker) off the tiles. The map tiles do not change with the theme, so the light block does not override it (AC-19: no hard-coded colour in coach.css). */ --shadow-strong: 0 1px 3px rgba(0, 0, 0, .6); /* ── Shape, size, type scale ─────────────────────────────────────────── */ --radius-card: 14px; --radius-ctl: 12px; --radius-pill: 999px; --tap: 44px; --bar-h: 56px; --gutter: 16px; --fs-xs: 12px; /* eyebrow, legend captions, table headers */ --fs-sm: 14px; /* meta row, pills, map panels */ --fs-md: 16px; /* body, buttons, inputs (16px stops iOS zoom-on-focus) */ --fs-lg: 19px; /* card title (index .feature h3) */ --fs-xl: clamp(28px, 4.4vw, 38px); /* page title (index h2) */ --dur: .2s; } @media (prefers-color-scheme: light) { :root { --bg: #f6f3ef; --panel: #ffffff; --panel-2: #efeae4; --line: #ddd5cc; --text: #1a1714; /* 16.14 on bg, 17.85 on panel */ --text-strong: #1a1714; --text-soft: #3a332e; /* 12.40 on panel */ --muted: #6b625b; /* 5.39 on bg, 5.96 on panel, 4.98 on panel-2 */ --dim: #6b625b; /* light has no lighter grey that passes; dim = muted */ --orange-text: #ad3a0b; /* 5.61 on bg, 6.20 on panel, 5.18 on panel-2 */ --green-text: #2a7230; /* 5.92 on panel (#4CAF50 would be 2.78) */ --blue: #1d4ed8; /* 6.70 on panel */ --red: #c62828; /* 5.62 on panel, 5.08 on bg */ --yellow-text: #8a5a00; /* 5.93 on panel */ --eyebrow: var(--orange-text); /* --orange on bg is 2.75: fails */ --wordmark-accent: var(--orange-text); /* large text needs 3:1; --orange gives 2.75 */ --field-line: #8a8079; /* 3.86 vs panel, 3.49 vs bg fill */ --focus: #ad3a0b; /* 5.61 vs bg, 6.20 vs panel */ --accent-line: #ad3a0b; /* 5.61 vs bg */ --best: #8a5a00; /* 5.93 on panel; #FFD700 on white is 1.4 */ --bar-bg: rgba(246, 243, 239, .96); --bar-line: #ddd5cc; --chrome-bg: rgba(255, 255, 255, .94); --tint-red: rgba(198, 40, 40, .08); --shadow: 0 8px 24px rgba(40, 25, 10, .18); } } /* ── Shared base ────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* The index wordmark, shared by mina's topbar and coach's bar. Markup: MXEnduro */ .wordmark { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 24px; letter-spacing: -0.5px; line-height: 1; position: relative; padding-bottom: 5px; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); } .wordmark b { color: var(--text-strong); font-weight: 800; } .wordmark i { color: var(--wordmark-accent); } .wordmark::after { content: ""; position: absolute; left: 30%; right: -4px; bottom: 9px; height: 3px; background: linear-gradient(90deg, transparent, var(--orange) 25%, var(--orange) 85%, transparent); transform: skewX(-30deg); border-radius: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }