/* ============================================================================ VSVSV — DESIGN TOKENS ============================================================================ The identity, as code. Loaded BEFORE style.css on every page, and intended to be loaded by the SSB sub-app too so both surfaces share one palette. WHY THIS FILE EXISTS There was no VSVSV visual identity source of truth. docs/brand-guidelines.md describes the RETIRED brand (the pre-VSVSV source identifier) and a logo the Brand Rule forbids us from using, so "follow the guidelines" was only half-defined. Two things drifted into that gap, and neither was detectable: * the SSB sub-app invented a near-miss palette — #0f2e5c (222 uses) where the navy is #002D62, #b22222 (34) where the crimson is #A6192E, plus #2a7d6e and #d97e2e which are in no palette at all; * an externally-authored redesign brief supplied family accents that fail the WCAG AA bar the same brief set as its own acceptance criterion. `npm run check:brand` measures brand STRINGS. Nothing measured colour. That is what `npm run check:brand-visual` now does, and this file is what it measures against. Add a colour here before you use it anywhere. WHAT IS *NOT* HERE The brand palette itself (--brand-navy etc.) still lives in style.css :root, which has 533 var(--brand-*) consumers. Re-declaring those values here would recreate the duplication that caused the drift in the first place. style.css :root and this file together are the identity; the gate scans both. ============================================================================ */ :root { /* ---- Family accents ---------------------------------------------------- Each course family gets an accent so certificates, instructor courses, SSB practice and "not for sale" read differently at a glance. THREE tokens per family, deliberately. Do not collapse them into one: --accent-x operative. Used ANYWHERE the colour carries or sits behind TEXT — roundel letters, price chips, pills, icons on tints. Every one is >= 4.5:1 on white. --accent-x-vivid decorative only. Rails, card top borders, gradients, halo rings. Never has text on or near it, so it can stay bright. --accent-x-rgb the vivid colour as "r,g,b", so tints are written rgba(var(--accent-x-rgb), .07) rather than color-mix(), which is still missing from older Android WebViews — a large share of this audience. Measured contrast on white (verified in the live DOM, not asserted): A 4.88 · B 5.33 · C 5.37 · instructor 6.60 SSB 5.78 · soon 5.42 · school 7.14 · agniveer 5.97 The brief's single flat value per family measured B 3.41, C 2.81, SSB 3.95, soon 3.64 — all under 4.5. Its amber failed even the 3:1 large-text floor, so white letters on the C roundel were unreadable. */ --accent-cert-a: #2f6fd0; --accent-cert-a-vivid: #2f6fd0; --accent-cert-a-rgb: 47,111,208; --accent-cert-b: #157a53; --accent-cert-b-vivid: #1e9e6a; --accent-cert-b-rgb: 30,158,106; --accent-cert-c: #9a5c08; --accent-cert-c-vivid: #d9880f; --accent-cert-c-rgb: 217,136,15; --accent-inst: #b3213b; --accent-inst-vivid: #b3213b; --accent-inst-rgb: 179,33,59; --accent-ssb: #0a7370; --accent-ssb-vivid: #0e8f8a; --accent-ssb-rgb: 14,143,138; --accent-soon: #5b6b85; --accent-soon-vivid: #7c8798; --accent-soon-rgb: 124,135,152; --accent-school: #6246a3; --accent-school-vivid: #6246a3; --accent-school-rgb: 98,70,163; /* Agniveer "field olive" (AGV-D-061). Base is the OWNER-APPROVED value, chosen on two measurements I re-ran rather than inherited: 5.97:1 on white, and 42° from the nearest hue already in use (the C amber) — the widest gap the palette had left. The decision specified ONLY the base. The vivid is derived here: same hue (77°) at 3.93:1, which lands inside the band the siblings already occupy (B 3.41, C 2.81, SSB 3.95), so the decorative step matches the rest of the palette instead of being invented at a new weight. */ --accent-agniveer: #566b1f; --accent-agniveer-vivid: #6f8a28; --accent-agniveer-rgb: 111,138,40; /* ---- Surface neutrals, biased toward the navy -------------------------- A pure mid-grey reads as unconsidered next to a navy brand. These are the only greys new work should use; the audit found ten unsystematised values already in live use (#666, #333, #555, #808080, #3a4757, #5b6b7f and four near-identical off-whites) which these replace as pages are reworked. */ --surface-line: #dde4ee; /* hairline borders */ --surface-line-soft: #e8edf5; /* dividers inside a card */ --surface-panel: #f5f7fa; /* section ground */ --surface-card: #ffffff; /* Muted body text. Measured 5.48:1 on --surface-card and 5.10:1 on --surface-panel, so it clears AA for normal text on BOTH grounds — the panel is the binding one. It is the most-repeated literal on the site (secondary paragraphs, help text, expiry notes); anything dimmer than this fails against the panel ground. */ --surface-ink-muted: #5a6b7d; /* Notice surface — used by the tri-lingual machine-translation disclaimer (frontend/js/tri-lingual.js). A caution tone that is NOT an error: the page is working as intended, the reader is simply being told the non-English text is machine-produced. Measured on --notice-bg: ink 9.76:1, strong ink 7.29:1, both above AA. The border is decorative and carries no text. */ --notice-bg: #fff8e8; --notice-line: #e6d3a8; --notice-ink: #4a3f28; --notice-ink-strong: #6b4e12; /* Semantic states the palette had no name for. These are PROMOTIONS, not new choices: --danger is the red already used on 11 auth/dashboard error surfaces and --info the blue already used on 6 classroom/dashboard information bars. Naming them at their existing values changes no pixels and gives the next person something to reach for other than pasting a hex. --success (#1e8e5a) and --warning (#c98a00) already exist in style.css :root. NOT promoted here: the three rival "success" greens (#2e7d32, #1b7f3b, #27ae60, 24 uses) and the slate text scale — reconciling those DOES move pixels, so it stays an owner decision. */ --danger: #c0392b; --info: #2f80ed; /* --success is a FILL colour: 4.14:1 on white, fine behind a badge or a border but BELOW the 4.5 AA floor for text. The three rival greens it replaces were used as text 11 times, nine of them currently PASSING (5.13 and 5.07), so folding them straight onto --success would have quietly created nine new accessibility failures while "cleaning up" the palette. --success-ink is the same hue darkened to 5.40:1, which is where those text uses already sat, so the text barely changes and now clears AA. One green identity, two roles. */ --success-ink: #1a794d; /* STATUS BACKGROUNDS. The palette had inks for success and danger but no FILLS, so every surface that needed a green or red panel invented one: for-schools.css alone inlines #e6f4ea four times and #f4dde0 four times, and the assessment review added #e6f6ed and #fdecea — near-misses of those, which is precisely the drift the ratchet exists to stop. These are not new colours; they are names for the two the product already uses, so the files currently inlining them can adopt the token and the burn-down falls rather than rises. Paired with --success-ink and --brand-crimson, which are what sits on them. */ --success-bg: #e6f4ea; --danger-bg: #f4dde0; /* Same fill-vs-ink split as the greens, for the same reason: white text on --info measures 3.87:1, under the 4.5 AA floor. --info-ink is the same hue darkened until white text on it clears AA (4.62:1). Used by the toast, which is plain 16px text — the "large text" 3:1 allowance does not apply to it. */ --info-ink: #1570eb; /* ON-NAVY forms of the five audience accents, for the identity router in the hero. The catalogue accents are tuned for dark text on white and are far too dark to read against #002D62 — --accent-cert-b (#157a53) on navy is 1.4:1, effectively invisible. These are the same hues lightened until each clears 3:1 on the hero background, measured: 5.49 / 6.43 / 6.31 / 4.87 / 4.96. Same audience, same hue, different ground — not a second palette. */ --on-navy-cert-a: #6ea8f0; --on-navy-cert-b: #4fc79b; --on-navy-ssb: #4fc2bd; --on-navy-inst: #e8798d; --on-navy-school: #a98fe0; /* Agniveer (AGV-D-061 olive #6f8a28), lightened the same way for the hero: 5.53:1 on #002D62, inside the 4.87-6.43 range of the five above. Added 2026-09-15 with the Agniveer tile. */ --on-navy-agniveer: #8fb234; /* --danger on a NAVY ground. #c0392b is 5.44:1 on white but only 2.49:1 on the dashboard sidebar, where the Logout control lives — the one control a learner must always be able to find. Same hue lightened to 4.88:1. */ --on-navy-danger: #e08177; /* Muted text ON the crimson instructor band. White is the heading; this is the quieter detail line beside it. Measured across the band's whole gradient: 8.14:1 on --brand-crimson-dark and 5.78:1 on --brand-crimson, so it clears AA at both ends rather than only where it was sampled. */ --on-crimson-muted: #f7dbe1; /* ---- Vertical rhythm --------------------------------------------------- THE ONE RULE: a container owns the space below it. Children do not carry bottom margins for section separation. Why this exists: the visual audit found 18 dead bands over 110px across five pages. On /courses.html a single gap measured 196px, assembled from THREE mechanisms that knew nothing about each other — .courses-grid margin-bottom 60px (legacy, from the old flat layout) + .track padding-bottom 80px + .track margin-bottom 56px Each was individually reasonable. Stacked, they left a hole the width of a phone screen. Use these tokens on the CONTAINER and delete the child's margin; do not add a new bottom margin to solve a spacing problem. */ --rhythm-tight: 18px; /* between rows inside one block */ --rhythm-block: 28px; /* between blocks inside a section */ --rhythm-section: 56px; /* between sibling sections */ --rhythm-band: 80px; /* around a major page-level band */ }