/* Victory Ops Design System (VODS) v2.1 — token layer. * * This file is a VERBATIM transcription of VODS Section 9 (the implementation-ready * CSS variable block). See docs/victory-ops-design-system.md. Per VODS Section 10, * token changes are decided in that document FIRST, then transcribed here — never the * reverse. Do not add, remove, or re-derive tokens here; the remaining VODS-derived * supplements (spacing scale, @font-face, base element styles) live in base.css. * * v1.7 named the eight derived fills/overlays Section 3 had only described, so they * are tokens now and live here. The four --status-*-dim fills moved up from base.css * with identical values (Inc 4 Step 1). v1.8/v1.9 added no tokens. v1.10 (ADR-080) * added the four --status-*-line borders: 12/30 is now a deliberate derived-opacity * scale (fills 12%, lines 30%), and deliberately NO neutral/muted line exists — * status containers take status lines; neutral containers take --border-*. * * v2.1 (Increment 5 Build Step 1) re-synced the whole block, closing the token-layer * defect v1.9 ledgered: Section 4's type scale had never been transcribed, so every * `var(--text-*)` size reference in the shipped stylesheets was invalid and silently * inherited. What landed here in this pass: * - --font-size-* (v1.12), the scale itself. Stem is --font-size-*, NOT --text-*, * which is the text-COLOUR namespace — the collision that caused the defect. * - --status-danger / --status-info lightened for contrast (v1.12), with their * -dim and -line derivations recomputed off the new RGB. * - --display-tracking / --table-header-tracking (v1.14) and --micro-label-tracking * (v2.0); the --motion-* duration tier (v1.14). * - --border-interactive and --surface-lift (v2.0) — resting affordances. * - --bp-shell / --bp-pin (v2.0) and the role-based --leading-* tier (v1.15/v2.0). * * Section 9 also carries the @font-face rule. It is NOT duplicated here: base.css owns * it, deliberately, because collectstatic's manifest storage only rewrites a RELATIVE * url() — see the comment on that rule. The doc writes an absolute /static/ path and * the filename `good_times_rg.woff2`; the shipped font is `good_times.woff2`. Divergence * recorded, not silently reconciled. */ :root { /* Brand */ --tv-gold: #E1C300; /* True Gold — official */ --tv-gold-hover: #F0D419; --tv-gold-pressed: #C4AA00; --tv-gold-dim: rgba(225, 195, 0, 0.12); --tv-white: #FFFFFF; --tv-black: #0A0A0B; /* Surfaces */ --surface-base: #0F0F10; --surface-raised: #1A1A1C; --surface-overlay: #242427; --surface-inset: #121214; /* Text */ --text-primary: #F2F2F3; --text-secondary: #B9B9BE; --text-muted: #85858C; /* Lines */ --border-default: #2E2E33; --border-strong: #45454C; --border-interactive: rgba(185, 185, 190, 0.60); /* v2.0 — a boundary that is the SOLE signal identifying a control. 3:1 binds and is met: 4.17 / 4.01 / 3.78 / 4.14. Not currentColor — that would draw gold under a gold cell. */ /* Status */ --status-success: #3DD68C; --status-warning: #E8833A; --status-danger: #F47875; /* lightened v1.12 — contrast */ --status-info: #7FA8F0; /* lightened v1.12 — contrast */ /* Derived fills & overlays (v1.7) */ --status-success-dim: rgba(61, 214, 140, 0.12); --status-warning-dim: rgba(232, 131, 58, 0.12); --status-danger-dim: rgba(244, 120, 117, 0.12); --status-info-dim: rgba(127, 168, 240, 0.12); --neutral-dim: rgba(185, 185, 190, 0.12); --surface-lift: rgba(255, 255, 255, 0.12); /* v2.0 — quiet-button resting fill. Composites, so it cannot collapse to 1.00:1 the way a fixed surface token does on its own surface. NOT a 1.4.11 boundary: see §3. */ --muted-dim: rgba(133, 133, 140, 0.10); --tint-frozen: rgba(18, 18, 20, 0.6); --scrim-modal: rgba(6, 6, 7, 0.72); /* Derived lines (v1.10) — status borders, 30% */ --status-success-line: rgba(61, 214, 140, 0.30); --status-warning-line: rgba(232, 131, 58, 0.30); --status-danger-line: rgba(244, 120, 117, 0.30); --status-info-line: rgba(127, 168, 240, 0.30); /* Shape */ --radius-pill: 999px; --radius-input: 50px; --radius-textarea: 15px; --radius-card: 16px; --radius-data: 8px; /* Depth — chrome only */ --shadow-raised: 6px 6px 14px rgba(0,0,0,0.45), -4px -4px 10px rgba(255,255,255,0.03); --shadow-inset: inset 4px 4px 8px rgba(0,0,0,0.45), inset -2px -2px 6px rgba(255,255,255,0.03); /* Type — families */ --font-display: 'Good Times', Arial, sans-serif; --font-ui: Arial, Helvetica, sans-serif; /* Type — scale (v1.12; transcribed from §4, closing the v1.9 token-layer defect). Stem is --font-size-*, NOT --text-*, which is the text-colour namespace. 15px is not on the scale. Display type uses 20-32 only. */ --font-size-11: 11px; /* RESTRICTED (v1.14): uppercase tracked micro-labels only. Never body, data cells, sentences, or values. Takes --text-secondary, never --text-muted. See §4. */ --font-size-12: 12px; /* labels, badges, table headers, chips */ --font-size-13: 13px; /* labels. The rail wordmark lockup renders at 13px and may use this token, but is governed by §7, NOT by §4 (v1.7). */ --font-size-14: 14px; /* body, data, help text */ --font-size-16: 16px; /* emphasis, grand-total rows. NOT a display size — the display floor is 20px (v1.13). */ --font-size-20: 20px; /* display */ --font-size-24: 24px; /* display */ --font-size-32: 32px; /* display */ /* Type — tracking (v1.14). Two tokens, one value: same number today, different rules (§4 display, §6 table header). Kept separate so neither can move the other. --label-tracking was proposed and DROPPED: it implemented no rule in this document. */ --display-tracking: 0.06em; --table-header-tracking: 0.06em; /* Motion (v1.14) — transition DURATIONS only. Easing is ease-out by rule (§8) and does not vary; the loader spinner is an animation, 1.1s linear, governed by §6 and outside this tier. prefers-reduced-motion overrides these four in one place — see §8. */ --motion-hover: 150ms; --motion-panel: 220ms; --motion-rail: 200ms; --motion-rail-label: 140ms; /* Breakpoints (v2.0) — named by what changes, not by device. CSS cannot interpolate a custom property into a media condition, so the two @media rules consuming these write the literal: the single documented exception to the no-raw-values rule (§10). Where they diverge, the token is canonical and the literal is the defect. */ --bp-shell: 768px; /* below: rail → bottom tabs, one column, safe-area, in-app back, irreversible actions absent, form input text → --font-size-16 */ --bp-pin: 1280px; /* below: rail pin disabled; the stored choice is preserved, never written */ --micro-label-tracking: 0.06em; /* UPPERCASE tracked labels that are neither display type nor table column headers, at any size. Uppercase is load-bearing (v2.3): a mixed-case label is not a consumer, whatever its job, and takes no tracking. See §4. */ /* Leading (v1.15) — role-based, unitless multipliers. Each resolves to a whole pixel at its role's PRIMARY size; display and data also hold whole across every size they are used at. 11px and 13px are prime, so no ui ratio lands whole there — permitted, because ui-role text is a non-wrapping label that rounds once rather than accumulating. body carries --leading-body; display, ui and data each declare explicitly. No element sets leading to 1 — optical tightening on a non-wrapping line is layout, not leading. --leading-ui is HELD, not chosen: see §4. */ --leading-display: 1.25; /* 20 → 25 · 24 → 30 · 32 → 40 */ --leading-body: 1.5; /* 14 → 21 · 16 → 24 (responsive form input text, v2.0) */ --leading-ui: 1.25; /* primary 12 → 15; 11 → 13.75 · 13 → 16.25. CHOSEN v2.0 */ --leading-data: 1.5; /* 14 → 21 · 16 → 24 · 32 → 48 */ }