/* Mora design language — CSS custom properties. Dark is the default. Light applies via [data-theme="light"] on , or via prefers-color-scheme when the user has not chosen (html[data-theme] absent). VENDORED from docs/design/web/tokens.css, which is generated from docs/design/tokens.json — keep in sync with that file, do not diverge by hand. TWO DELIBERATE CHANGES from the file in docs/, both required by the handoff: 1. The `@import url('https://fonts.googleapis.com/...')` at the top of the doc copy is GONE. "Self-host both; never fall back to a system sans" (DESIGN_LANGUAGE.md §2, and docs/HANDOFF.md Assets) is incompatible with fetching the faces from Google — and the app's CSP is `font-src 'self'`, so the request would be blocked anyway. The four faces are declared below against files in public/fonts. 2. `.light` is also matched as `[data-theme='light']`. The doc copy switches on a class, but the same file's own prefers-color-scheme block keys off `:root:not([data-theme])`, so a class-only switch leaves the attribute unset and the OS preference keeps winning over an explicit pick — which "OS setting is a fallback only and must never override an explicit pick" forbids. Both selectors are honoured; the attribute is what the app sets. It lives in public/ rather than in the bundle so the service worker can precache it at a stable URL. */ @font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } :root { --page: #06080B; --bg: #0A0E12; --card: #0D1219; --ink: #F1F5F9; --muted: #7D8794; --hair: rgba(148, 163, 184, 0.16); --ring: rgba(148, 163, 184, 0.12); --rail: rgba(148, 163, 184, 0.34); --gold: #D4A446; --gold-soft: rgba(212, 164, 70, 0.55); --poly: #E0B356; --poly-fill: rgba(212, 164, 70, 0.13); --warn: #C96A4A; --warn-soft: rgba(201, 106, 74, 0.50); --on-gold: #0C0F15; --honeycomb-opacity: 0.14; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --radius-card: 14px; --radius-button: 11px; --radius-chip: 6px; --target: 44px; --nav-height: 62px; color-scheme: dark; } .light, [data-theme='light'] { --page: #E9E4D8; --bg: #F7F4EC; --card: #FFFDF7; --ink: #0C0F15; --muted: #5C6470; --hair: rgba(12, 15, 21, 0.15); --ring: rgba(12, 15, 21, 0.08); --rail: rgba(12, 15, 21, 0.30); --gold: #8F6C1E; --gold-soft: rgba(143, 108, 30, 0.50); --poly: #0C0F15; --poly-fill: rgba(12, 15, 21, 0.07); --warn: #A2472A; --warn-soft: rgba(162, 71, 42, 0.50); --on-gold: #F7F4EC; --honeycomb-opacity: 0.08; color-scheme: light; } /* NO system-preference fallback — deliberately (athlete decision, 2026-08-10). Dark is not merely the default palette; it is the default STATE: a first visit is dark on every OS, and light exists only as the explicit toggle recorded in html[data-theme="light"]. The earlier prefers-color-scheme block let a light-mode OS silently pick the second theme on first launch, which on this athlete's desktop meant the app never looked like its own design. */ body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); } a { color: var(--gold); } a:hover { color: var(--ink); } /* Every numeral, everywhere. */ .mono, [data-numeral] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* Uppercase mono label. */ .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius-card); } .card[data-active] { border-color: var(--gold-soft); } .chip { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--hair); border-radius: var(--radius-chip); padding: 3px 7px; color: var(--muted); } .chip[data-tone='gold'] { color: var(--gold); border-color: var(--gold-soft); } .chip[data-tone='warn'] { color: var(--warn); border-color: var(--warn-soft); } .btn { min-height: var(--target); border-radius: var(--radius-button); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; background: transparent; border: 1px solid var(--hair); color: var(--muted); } .btn[data-variant='primary'] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); } .btn[data-variant='safety'] { border-color: var(--warn-soft); color: var(--warn); } /* Form B breathing: scale 0.74 → 1.00 → 0.74, 4s in / 8s out. */ @keyframes mora-breathe { 0% { transform: scale(0.74); } 33.333% { transform: scale(1); } 100% { transform: scale(0.74); } } @keyframes mora-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }