/* ============================================================ On-Device-Voice-Agent — design tokens · "Midnight Instrument" v3 (AI coach) Single source of truth. Layouts consume roles, never literals — no colour literal may appear outside this file (ui.js and treadmill3d.js read their canvas colours from these tokens). Two voices on one dark stage: CYAN is the rider (user input, ready), AMBER-ORANGE is the coach (it speaks). Safety colours (danger / amber confirm / target / ok) are unchanged from v1. v3 (connected-fitness premium): a deeper ink base, the HR zones z1–z5 as the energy accents, a real type scale (--fs-*), a 4/8 spacing scale (--sp-*), touch-target minimums (--tap*), and one state-accent palette (--state-*) the orb ring reads (ui.js). spec.html is the authority for the semantics behind every token — if a layout and the spec disagree, one of them is broken. ============================================================ */ @font-face { font-family: 'Anton'; src: url('fonts/anton-v27-latin_vietnamese-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/be-vietnam-pro-v12-latin_vietnamese-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/be-vietnam-pro-v12-latin_vietnamese-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/be-vietnam-pro-v12-latin_vietnamese-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Be Vietnam Pro'; src: url('fonts/be-vietnam-pro-v12-latin_vietnamese-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* -- stage -- deep midnight depth; panels float on near-black */ --bg-abyss: #04070E; /* deep ink: page, inset wells */ --bg-base: #070C18; /* the stage */ --bg-lift: #111A2E; /* floating cards, sheets */ --panel: rgba(148, 196, 255, 0.055); --panel-edge: rgba(148, 196, 255, 0.13); --hairline: rgba(148, 196, 255, 0.20); --scrim: rgba(4, 7, 14, 0.72); /* sheets/overlays over live content */ /* -- ink -- raised dim/faint so 12 px chrome reads at 3 m */ --ink: #F4F8FF; --ink-dim: rgba(244, 248, 255, 0.80); --ink-faint: rgba(244, 248, 255, 0.55); --ink-label: rgba(199, 224, 255, 0.66); /* microlabels: 12 px, tracked, cool */ /* -- accents (the ramp of the one loud voice) -- */ --cyan: #2AE5FF; /* the agent's voice — the ONLY hue */ --cyan-dim: #1592B4; /* cyan stepped down: borders, icons */ --cyan-glow: rgba(42, 229, 255, 0.30); /* cyan as a light wash */ --lime: #BFFF46; /* speaking / running emphasis */ --grad-voice: linear-gradient(100deg, #2AE5FF 0%, #6FF7C6 55%, #BFFF46 100%); /* the ONLY gradient in the system */ /* -- the two voices (v2) -- the rider is cyan, the coach is warm */ --coach: #FF9F43; /* the coach speaking — orb, bubbles, brand */ --coach-dim: #B8692A; --coach-glow: rgba(255, 159, 67, 0.28); --coach-wash: rgba(255, 159, 67, 0.10); --user-wash: rgba(42, 229, 255, 0.09); --orb-hi: #28406E; /* voice-orb glass: lit edge → core → rim */ --orb-mid: #0D152A; --orb-lo: #060A14; --scrim-soft: rgba(5, 8, 16, 0.45); /* -- HR zones (timeline strip + live HR) -- intensity ramp, never danger red */ --z1: #6E8BFF; /* recovery · cool-down */ --z2: #3DD6C4; /* easy · warm-up */ --z3: #9BE15D; /* steady · build */ --z4: #FFC93D; /* tempo · hold · climb */ --z5: #FF7A59; /* surge · crest */ --grad-energy: linear-gradient(90deg, var(--z1), var(--z2), var(--z3), var(--z4), var(--z5)); /* -- state accents (v3) -- the orb ring's colour per turn state (ui.js STATE_COLORS reads these); the speaking colour is the coach's, not lime. Thinking is the hand-off: its ring starts on the rider's cyan and the second arc is the coach's — so the accent is cyan, not violet. */ --state-idle: var(--cyan-dim); --state-listening: var(--cyan); --state-thinking: var(--cyan); --state-speaking: var(--coach); --state-confirm: var(--amber); --state-alert: var(--danger); /* -- semantic states (safety-coded, not fashion — roles in spec.html) -- */ --target: #FFE14D; /* command confirmed · rides above the value */ --amber: #FFC53D; /* awaiting confirmation */ --danger: #FF4D5E; /* safety only — never decoration */ --ok: #46E8A0; --violet: #A88BFF; /* thinking */ /* -- type -- Anton carries display numerals only */ --font-display: 'Anton', 'Be Vietnam Pro', sans-serif; --font-body: 'Be Vietnam Pro', -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace; --track-label: 0.26em; /* -- type scale -- the 9.5–10.5 px text is retired; 12 px is the floor. UI text (Be Vietnam Pro) runs micro→3xl; the Anton numerals have their own ramp (--fs-num-*), which layouts may clamp() between. */ --fs-micro: 12px; /* microlabels, chips, chrome */ --fs-xs: 13px; /* badges, units, meta */ --fs-sm: 14px; /* chips, secondary rows */ --fs-body: 15px; /* bubbles, body copy */ --fs-md: 17px; /* lead copy, buttons */ --fs-reply: 18px; /* the agent's spoken reply */ --fs-lg: 19px; /* the live caption */ --fs-xl: 26px; /* card titles, wordmark */ --fs-2xl: 32px; /* phone headline */ --fs-3xl: 40px; /* console headline */ --fs-num-sm: 24px; /* compact tile numerals */ --fs-num: 42px; /* tile numerals */ --fs-num-lg: 72px; /* speed / incline hero numerals */ --fs-display: 64px; /* the keyout headline */ --lh-tight: 1.05; --lh-snug: 1.35; --lh-body: 1.5; /* -- spacing -- 4/8 scale; layouts never invent a gap */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; /* -- touch -- minimum hit sizes on phone/tablet (console uses its own) */ --tap: 44px; /* any interactive target */ --tap-lg: 48px; /* STOP, confirm, sheet handle */ /* -- elevation -- hairline edge + inset sheen + shadow, as bundles */ --elev-1: inset 0 0 0 1px rgba(148, 196, 255, 0.12); --elev-2: inset 0 0 0 1px rgba(148, 196, 255, 0.16), inset 0 1px 0 rgba(226, 240, 255, 0.05), 0 10px 28px rgba(2, 5, 12, 0.55); --elev-3: inset 0 0 0 1px rgba(148, 196, 255, 0.20), inset 0 1px 0 rgba(226, 240, 255, 0.07), 0 22px 56px rgba(1, 4, 10, 0.70); /* -- motion (spec.html is the authority for semantics) -- */ --t-fast: 150ms; --t-med: 350ms; --t-card: 280ms; --t-slow: 700ms; --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1); --ease-spring: cubic-bezier(0.2, 1.35, 0.3, 1); --ease-card: cubic-bezier(0.2, 0.9, 0.2, 1); /* -- geometry -- */ --r-xs: 5px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* -- glow -- the washes derive from their ink tokens */ --glow-cyan: 0 0 34px var(--cyan-glow); --glow-amber: 0 0 40px rgba(255, 197, 61, 0.30); --glow-red: 0 0 60px rgba(255, 77, 94, 0.35); --glow-coach: 0 0 40px var(--coach-glow); --danger-wash: rgba(255, 77, 94, 0.14); --ok-wash: rgba(70, 232, 160, 0.12); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-card: 0ms; --t-slow: 0ms; } }