/* ============================================================================= I'd cap that — design tokens Decision 1 (agreed, see docs/DESIGN-SYSTEM.md): the app is a flat colour field with big tight type on it and no chrome. Two line states. When a verdict lands on ABSOLUTE CAP or NO CAP, the whole field takes its colour. Two values drive almost everything else: --field and --live. Every dim state is derived from them with color-mix, so the dim state is always the field pushed toward the ink and never a grey laid on top. Change the field hue and the entire app stays coherent. Rules: 1. No raw hex, px, ms or cubic-bezier outside this file. 2. Type is NOT settled — the stack below is a placeholder pending design round 2. It is one token; swapping it is a one-line change. ============================================================================= */ @layer tokens { :root { color-scheme: dark; /* --- the field ----------------------------------------------------------- Four candidate resting hues, selected with . Sage is the one closest to the Spotify reference. Not yet settled. */ --field-ink: #14161B; --field-moss: #18211C; --field-clay: #1F1917; --field-sage: #5A7354; --field: var(--field-ink); --live: #F3F5F7; /* the lit line. 15.8:1 on ink. */ /* Derived. The dim states are the field moved toward the ink, never grey. */ /* A line that has been spoken still has to be READABLE. Recessive is not the same as invisible, and the first long live session failed on exactly this: whole sentences were gone against the field at normal laptop distance. Dim enough to get out of the way of the live line, bright enough to read back a conversation. */ --past: color-mix(in oklab, var(--field) 48%, var(--live)); --faint: color-mix(in oklab, var(--field) 62%, var(--live)); --hair: color-mix(in oklab, var(--field) 86%, var(--live)); --sunk: color-mix(in oklab, var(--field) 70%, var(--live)); /* --- verdicts ------------------------------------------------------------ Red and green are decided. The other four are design round 6; amber and the neutral are placeholders and deliberately quiet. Colour is never the only signal — see --line-* below and the glyphs in render.js. */ --v-red: #FF5247; --v-green: #33D693; --v-amber: #F0A63C; --v-quiet: #8A929C; --v-contradicted: var(--v-red); --v-supported: var(--v-green); --v-partially_supported: var(--v-amber); --v-disputed: var(--v-quiet); --v-insufficient_evidence: var(--v-quiet); --v-not_fact_checkable: var(--v-quiet); /* Non-colour signal per verdict: the underline style. Survives greyscale, a washed-out projector and video compression, all of which eat hue. */ --line-contradicted: solid; --line-supported: solid; --line-partially_supported: dashed; --line-disputed: double; --line-insufficient_evidence: dotted; --line-not_fact_checkable: dotted; /* The field flash. Derived from the field itself so every hue works. */ --flash-red: color-mix(in oklab, var(--field) 74%, var(--v-red)); --flash-green: color-mix(in oklab, var(--field) 76%, var(--v-green)); /* The checking wash — a highlighter being dragged over the words. */ --wash: #E9FF63; /* Failure. Never the same as quiet: an hour was lost to a dead microphone that looked exactly like nobody talking. */ --alarm: #FF5247; --alarm-fill: color-mix(in oklab, var(--field) 72%, var(--v-red)); /* --- type ---------------------------------------------------------------- Geist, agreed in design round 2. Loaded from Google Fonts for now; it gets self-hosted as woff2 in web/fonts/ before the demo so there is no third-party request at the venue. The fallback is the system stack, so a blocked font costs nothing but character. */ --font-display: "Geist", system-ui, -apple-system, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui: "Geist", system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-line: clamp(27px, 6.4vw, 34px); /* the transcript. The product. */ --fs-tag: clamp(11px, 1.3vw, 12px); /* ABSOLUTE CAP beside the words */ --fs-logo: clamp(18px, 4.8vw, 23px); /* the wordmark. Branding, not a label. */ --fs-count: clamp(21px, 5.4vw, 27px); /* the tally numerals */ --fs-status: 13px; --fs-label: 11px; --fs-count-lbl: 10px; --fs-body: 14px; --fs-claim: 15px; --fs-num: 16px; --fs-input: 17px; /* below 16px iOS zooms the viewport and never unzooms */ --lh-line: 1.24; --ls-line: -0.018em; --ls-label: 0.12em; --fw-line: 700; --fw-semi: 600; --fw-med: 500; /* --- space, radius ------------------------------------------------------- */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 22px; --sp-7: 30px; --sp-8: 44px; --gutter: clamp(18px, 4.5vw, 40px); --line-gap: clamp(18px, 2.6vw, 26px); --measure: 760px; --r-sm: 7px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --tap: 44px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* --- motion -------------------------------------------------------------- Four durations. The field flash is the only slow one, because it is the only thing that is supposed to be felt rather than noticed. */ --dur-fast: 140ms; --dur-base: 260ms; --dur-line: 520ms; /* a line changing state */ --dur-field: 640ms; /* the field taking a verdict's colour */ --hold-field: 1500ms; /* how long it holds before settling back */ --hold-relit: 2400ms; /* how long a late verdict relights an old line */ --dur-sweep: 1500ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --z-moment: 15; --z-card: 20; --z-bar: 30; --z-alarm: 40; } :root[data-field="moss"] { --field: var(--field-moss); } :root[data-field="clay"] { --field: var(--field-clay); } :root[data-field="sage"] { --field: var(--field-sage); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-line: 1ms; --dur-field: 1ms; --dur-sweep: 1ms; } } }