/* ══════════════════════════════════════════════════════════════ TECH IQ — design system © 2026 Matt Laframboise / The Raspberry Company. All rights reserved. One stylesheet, no build step. Organised as: 1 tokens 9 labs + engine surfaces 2 base + a11y 10 virtual computer (VOS) 3 nav + chrome 11 diagnostic 4 buttons/cards 12 licence + road test 5 states 13 readiness 6 login 14 knowledge, paths, saved 7 academy/lesson 15 enterprise + admin 8 dashboard 16 dark, high contrast, print, responsive BRAND: exactly two hues change between IQ products. Everything else derives. The values below are MEASURED, not chosen — every pairing the design system uses clears WCAG AA, and the family design audit records the ratios. That claim used to be checked by nobody, and it was FALSE in dark mode for every filled accent control. tools/check-data.js now resolves these tokens out of this file and re-measures nine pairings across all four ramps on every run — because a contrast table with no ramp column has measured a quarter of the product and reported on all of it. ══════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ────────────────────────────────────────────── */ :root{ --lp:#3a2a80;--lp-d:#241a56;--lp-m:#513ab0;--lp-t:rgba(58,42,128,.07); --lo:#c026a3;--lo-h:#9d1d85;--lo-l:rgba(192,38,163,.13);--lo-p:rgba(192,38,163,.06); /* THE ACCENT AS A FOREGROUND on dark brand surfaces. --lo measures 2.22:1 on --lp and is unreadable there. HR IQ discovered this token; Tech IQ does not merely inherit it, it requires it. #fbb2ec measures 6.96 on --lp, 9.34 on --lp-d and 4.91 on --lp-m. ANY rule putting the accent on a dark brand surface must use this one. */ --lo-od:#fbb2ec; /* The PRIMARY used as a foreground. Same shape of problem as --lo-od: in the dark ramps --lp is #2b1f60, DARKER than the card it would sit on, and the axe audit measured it at 1.18:1 across 28 rules. */ --lp-ink:#3a2a80; /* THE MIRROR CASE, and the one the family had never named: the foreground for text sitting ON an accent FILL. Every primary button in the product is this pairing. It has to be a token rather than a literal because --lo moves in opposite directions between the ramps. Light mode darkens the accent, so white is correct (5.19:1). Dark mode LIGHTENS it to #e468c8 so the accent still reads as a foreground elsewhere — and white on that measures 2.95:1, below the AA floor this product targets. Hard-coding `color:#fff` meant every filled accent control failed in dark mode, silently, because the light ramp it was measured in was fine. Set per ramp below. ANY rule putting text on --lo or --lo-h must use it. */ --lo-fg:#fff; --bg:#f5f4f9;--wh:#fff;--g100:#edecf3;--g200:#dcd9e6;--g400:#8b86a4;--g600:#57516e; --tx:#181428;--txs:#3d3757;--txm:#57516e;--bdr:#e0dcea; /* --txm darkened from #8b86a4 to clear WCAG AA (~5.4:1) on --bg. Dark mode overrides it below rather than reusing it. */ --ok:#0b7d63;--ok-l:#d7f3ea;--er:#c2410c;--er-l:#fdece3; --wa:#a3690a;--wa-l:#fbf0d8;--inf:#4c2f9e;--inf-l:#e9e3fa; /* Badge text. The hues above are tuned to read as icons and borders against the page, not as 0.68rem bold text on their own tint. These are the same hues darkened to clear 4.5:1 for status pills. Overridden in dark mode. */ --ok-bt:#065f46;--wa-bt:#7c4a02;--er-bt:#9a3412; --fd:'Playfair Display',Georgia,serif; --fb:'Nunito',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; --heading:var(--lp); --r:10px;--rs:6px;--rl:16px; --sh:0 2px 12px rgba(36,26,86,.08); --shm:0 4px 20px rgba(36,26,86,.12); --shl:0 8px 32px rgba(36,26,86,.17); /* Z-INDEX SCALE — single source of truth. Each layer leaves room above for related elements (a popover on top of its modal). Use these rather than raw numbers. */ --z-base:1; --z-vos-win:400; /* windows inside the virtual computer */ --z-vos-bar:900; --z-sticky:1040; /* main nav, sticky bars */ --z-dropdown:1100; --z-fab:2000; --z-mob-nav:9000; --z-a11y:9998; --z-toast:9999; --z-modal:10000; --z-modal-popover:10001; --z-boot-error:99999; } *,*::before,*::after{box-sizing:border-box} /* color-scheme tells the browser what native UI (form controls, scrollbars, open