/* ASI (All Season Improvements) — Deep Petrol × Beam brand tokens SINGLE SOURCE OF TRUTH for colour / type / geometry. This is the ONLY file in src/** allowed to contain a colour literal. `npm run check` fails the build on a hex literal anywhere else, and on any var() reference that nothing defines. (Exception: src/assets/brand/*.svg — standalone image files such as the favicon cannot reference CSS custom properties. Allow-listed in check.mjs.) BRAND-03 is RESOLVED: dark-dominant, petrol runs the whole page. Kenneth, 2026-08-12. Deployed. A dominance flip is a change to the ALIAS layer below — not a refactor of any component. */ :root { /* ═══════════ RAW BRAND — measured, do not re-derive ═══════════ */ --asi-amber: #FF7A1A; /* accent. ON DARK GROUNDS ONLY. 5.45:1 on petrol */ --asi-amber-hover: #E56A0F; --asi-ember: #BF450F; /* orange for text/icons ON LIGHT grounds. 4.61:1 on bone */ --asi-petrol: #0B2F38; /* dominant dark ground; also body text on light */ --asi-petrol-2: #0E3742; /* raised panel on petrol */ --asi-petrol-3: #123F4C; /* hover state for petrol surfaces */ --asi-concrete: #B9BCB4; /* mid neutral — stat bands, secondary panels */ --asi-bone: #F4F2ED; /* light ground; also text on dark */ --asi-bone-2: #EAE6DE; /* light ground, one step down */ --asi-bone-3: #DFDAD0; /* light ground, two steps down */ --asi-line: #D4CFC4; /* hairline on light grounds */ --asi-white: #FFFFFF; /* legacy on-dark text in the deployed build */ /* ═══════════ DERIVED TEXT — pre-computed, measured WCAG, never rgba ═══════════ */ --asi-text-on-dark: #F4F2ED; /* 12.70:1 on petrol — AAA */ --asi-text-on-dark-muted: #B3BBBA; /* 7.26:1 on petrol — AAA */ --asi-text-on-dark-subtle: #A2AEAE; /* 6.23:1 on petrol — AAA */ --asi-text-on-dark-min: #8B9A9C; /* 4.87:1 on petrol — AA floor, go no lighter */ --asi-text-on-light: #0B2F38; /* 12.70:1 on bone — AAA */ --asi-text-on-light-body: #3A3D40; /* 9.77:1 on bone — AAA */ --asi-text-on-light-muted: #4A5558; /* 6.87:1 on bone — AA floor for body copy */ --asi-text-on-concrete: #0B2F38; /* 7.39:1 — AAA */ --asi-text-on-concrete-body: #3A3D40; /* 5.68:1 — AA */ /* ═══════════ TRANSLUCENT SCALES ═══════════ Decorative only — hairlines, veils, shadows. Never carry meaning. Defined here so no component holds a colour value of its own. */ --asi-bone-a16: rgba(244, 242, 237, 0.16); --asi-bone-a38: rgba(244, 242, 237, 0.38); --asi-petrol-a08: rgba(11, 47, 56, 0.08); --asi-petrol-a16: rgba(11, 47, 56, 0.16); --asi-petrol-a18: rgba(11, 47, 56, 0.18); --asi-petrol-a30: rgba(11, 47, 56, 0.30); --asi-petrol-a50: rgba(11, 47, 56, 0.50); --asi-petrol-a72: rgba(11, 47, 56, 0.72); --asi-petrol-a94: rgba(11, 47, 56, 0.94); --asi-petrol-a95: rgba(11, 47, 56, 0.95); --asi-white-a07: rgba(255, 255, 255, 0.07); --asi-white-a10: rgba(255, 255, 255, 0.10); --asi-white-a12: rgba(255, 255, 255, 0.12); --asi-white-a14: rgba(255, 255, 255, 0.14); --asi-white-a16: rgba(255, 255, 255, 0.16); --asi-white-a28: rgba(255, 255, 255, 0.28); --asi-white-a55: rgba(255, 255, 255, 0.55); --asi-white-a58: rgba(255, 255, 255, 0.58); --asi-white-a72: rgba(255, 255, 255, 0.72); --asi-white-a75: rgba(255, 255, 255, 0.75); --asi-white-a80: rgba(255, 255, 255, 0.80); --asi-white-a85: rgba(255, 255, 255, 0.85); --asi-white-a90: rgba(255, 255, 255, 0.90); /* Photographic scrim — deeper and cooler than petrol so the frame sequence reads through it. Not a brand colour; exists to hold text legible over moving imagery. */ --asi-scrim: rgba(6, 12, 20, 0.62); --asi-scrim-a00: rgba(6, 12, 20, 0); --asi-scrim-a06: rgba(6, 12, 20, 0.06); --asi-scrim-a18: rgba(6, 12, 20, 0.18); --asi-scrim-a82: rgba(6, 12, 20, 0.82); --asi-shadow-a30: rgba(0, 0, 0, 0.30); --asi-shadow-a40: rgba(0, 0, 0, 0.40); --asi-shadow-a45: rgba(0, 0, 0, 0.45); /* ═══════════ FOCUS ═══════════ Rule 4: amber on dark, petrol on light. --focus is the on-dark default because the whole site is dark; a .on-light section overrides it. */ --asi-focus: var(--asi-amber); --asi-focus-on-light: var(--asi-petrol); /* ═══════════ TYPE ═══════════ */ --asi-font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif; --asi-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ═══════════ GEOMETRY ═══════════ */ --asi-radius: 0; /* square corners are the brand. zero. everywhere. */ --asi-border: 1px; --asi-container: 1200px; /* ═══════════════════════════════════════════════════════════════════ ALIAS LAYER — the names components actually use. THIS is the dominance switch. Flipping to orange-dominant or light-dominant means editing below this line and nothing else. ═══════════════════════════════════════════════════════════════════ */ --ground: var(--asi-petrol); --ground-alt: var(--asi-petrol-2); --ground-raised: var(--asi-petrol-3); --accent: var(--asi-amber); --accent-hover: var(--asi-amber-hover); --accent-on-light: var(--asi-ember); --on-accent: var(--asi-petrol); /* text ON an accent fill. Rule 2. */ --text: var(--asi-text-on-dark); --text-muted: var(--asi-text-on-dark-muted); --text-subtle: var(--asi-text-on-dark-subtle); --text-min: var(--asi-text-on-dark-min); --hairline: var(--asi-bone-a16); --focus: var(--asi-focus); /* Light-ground aliases — unused while dark-dominant, but the moment a light section lands it must pull from here rather than invent values. */ --ground-light: var(--asi-bone); --ground-light-2: var(--asi-bone-2); --ground-light-3: var(--asi-bone-3); --text-on-light: var(--asi-text-on-light); --text-on-light-body: var(--asi-text-on-light-body); --text-on-light-muted: var(--asi-text-on-light-muted); --hairline-on-light: var(--asi-line); /* ═══════════ COMPONENT-FACING NAMES ═══════════ site.css was written against these. They are one indirection from the alias layer above, so a dominance flip still lands in one place. */ --navy: var(--ground); --navy-2: var(--ground-alt); --petrol3: var(--ground-raised); --steel: var(--accent); --steel-deep: var(--accent-on-light); --ember: var(--accent-on-light); --ink: var(--asi-text-on-light); --paper: var(--ground-light); --mist: var(--ground-light-2); --mist-2: var(--ground-light-3); --line: var(--hairline-on-light); --muted: var(--text-on-light-muted); --bone: var(--asi-bone); --on-dark: var(--text); --on-dark-muted: var(--text-muted); --on-dark-subtle: var(--text-subtle); --on-dark-min: var(--text-min); --radius: var(--asi-radius); --container: var(--asi-container); --fd: var(--asi-font-display); --fb: var(--asi-font-body); } /* Contrast rules (measured, not guessed — WCAG 2.1 relative luminance): 1. Amber never touches a light ground (2.33:1 on bone, 1.36:1 on concrete — both fail). On bone/concrete, orange text/icons use --accent-on-light. 2. Nothing orange goes on concrete. Neither amber (1.36) nor ember (2.68) is legible there. Text on concrete is --asi-text-on-concrete[-body]. 3. Amber buttons take petrol text, not white. White-on-amber is 2.61:1 and fails; petrol-on-amber is 5.45:1 and passes. Use --on-accent. 4. Focus ring follows the ground: --focus on dark, --asi-focus-on-light inside a .on-light section. */