/* ========================================================================== BRAND TOKENS — the values every VMA screen is built from. -------------------------------------------------------------------------- The single source of truth for colour and type. `doc/design-system.md` explains the intent and the rules; this file holds the numbers, so the two cannot drift: the doc points HERE rather than repeating hexes in prose. Loaded FIRST in dashboard.html, ahead of main.css, because main.css's legacy brand variables are now aliases of these. Do not add layout or component rules to this file — tokens only. Component vocabulary (the slanted lettering, hazard bars, rubber stamps) lives as recipes in the design system doc until a THIRD screen needs it; two screens with local variations is not yet a shared component, and promoting it early is how a "shared" class ends up with four override blocks. Provenance: _private/vmastudio-design-guide.pdf, the brand's own reference. Page 4 is the palette, page 5 the type stack. Where this file departs from that document it says so, with the reason, right here — never silently. ========================================================================== */ :root { /* ── THE PALETTE ────────────────────────────────────────────────────── The eight colours from guide page 4, verbatim. Green is the brand and carries identity; everything else is an ACCENT and earns its place by meaning something. A screen that uses six of these is decorated, not designed. ⚠️ Green was #8cc63f in the code and #8DC63F in the guide — the same colour to the eye (the artwork itself samples #8bc53f, an ICC round trip). The guide's value wins because a brand needs ONE spelling. */ --vma-green: #8DC63F; --vma-red: #EA1B36; --vma-purple: #5E17EB; --vma-yellow: #CBDB2A; --vma-orange: #FF751F; --vma-white: #FFFFFF; --vma-grey: #545454; --vma-blue: #1A70E4; /* Pre-mixed channels. Glows and washes need the brand colour at low alpha far more often than at full strength, and a hand-typed rgba() drifts. */ --vma-green-rgb: 141, 198, 63; --vma-red-rgb: 234, 27, 54; --vma-blue-rgb: 26, 112, 228; --vma-grey-rgb: 84, 84, 84; /* ── ROLES ──────────────────────────────────────────────────────────── What a colour MEANS, so a component asks for the meaning and not the hue. Change the mapping here and every screen follows. Note --vma-ok is deliberately NOT --vma-green: green is the brand, and if it also means "success" then a brand-green heading reads as a status. Success is a state; the palette's own green stays identity. */ --vma-ok: #2ECC71; --vma-warn: var(--vma-orange); --vma-danger: var(--vma-red); --vma-info: var(--vma-blue); /* ── SURFACES ───────────────────────────────────────────────────────── The near-black ladder the palette is designed against. Established by the fight-night screens and promoted here unchanged — the guide shows dark ground on every page but never names the greys. Read them as depth: ink is the page, raised is a card, sunken is a well cut INTO a card (a score box, a code block). */ --vma-ink: #050505; --vma-surface: #0E100C; --vma-raised: #121212; --vma-raised-2: #181A17; --vma-sunken: #080908; --vma-line: #262A24; --vma-line-2: #343A31; /* Text on those surfaces. "Bone" rather than pure white: #FFFFFF on #050505 is a harsher contrast than any of the printed material uses, and it buzzes at large sizes. Pure white stays available as --vma-white for the places the guide really does set it. */ --vma-bone: #F1F2EC; --vma-dim: #B9BDB3; --vma-muted: #8E948A; --vma-faint: #6D736A; /* ── TYPE ───────────────────────────────────────────────────────────── Guide page 5 names four faces. Two of them cannot be licensed for the web at any price we would pay, so this is the honest stack: Anton ✅ OFL (Google Fonts) — the guide's headline face Neue Montreal ❌ Pangram Pangram, commercial → Archivo stands in Canva Sans ❌ Canva-proprietary, unlicensable → Lato covers it Lato ✅ OFL (Google Fonts) — the guide's body face Anton has NO true italic. The guide's "Anton (headline w italics)" means the skew the flyers use, which is why display type carries transform: skewX(-8deg) rather than font-style: italic. Do not reach for a synthetic oblique — the skew is the house angle and it is uniform. --vma-condensed is an EXTENSION, not a brand face. The guide's stack has no condensed face because its materials have no small letterspaced label role; the app does (every stat caption and button on the fight-night screens). Barlow Condensed fills that role. Measured before choosing: swapping those labels to Archivo runs them 34–38% wider and breaks the two densest screens in the app. */ --vma-display: 'Anton', 'Arial Narrow Bold', Impact, sans-serif; --vma-sub: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --vma-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --vma-condensed: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* The house angle. One number, so a stamp rotated by hand can never end up leaning the other way from the lettering beside it. */ --vma-skew: -8deg; /* ── LEGACY ALIASES ─────────────────────────────────────────────────── The fight-night screens (attendance scanner, daily roster) were built against these names before this file existed. They stay so those two files did not need a rename in the same change that moved the values — new work should use the --vma-* names directly. ⚠️ --fn-disp used to be Bebas Neue. Anton's cap height is 0.859em against Bebas's 0.700em, so every display font-size in those two files was multiplied by 0.8145 when the face changed: same cap height on screen, and width within ~4% at every real string measured. If you set a display size against the OLD screenshots, you will set it ~23% too large. */ --fn-disp: var(--vma-display); --fn-cond: var(--vma-condensed); }