/** * design-tokens.css — the design system's colours, radii and one width. * * ⚠️ THIS IS THE ONLY DEFINITION. It was the `:root` block at the top of * app-shell.css, lifted out on 2026-09-11 so a SECOND page could have the tokens * without taking 97KB of app chrome with them. * * 🔻 Alex, 2026-09-11, on the coach's plan as it appears on the Onboarding Desk: * *"I want it to represent the exact pixel-perfect version of what they see in * their dashboard, not this ugly thing that is completely poorly formatted."* * * It was not a styling mistake. `maya-hq.css` was loaded on admin.html and reads * --text-2/3/4, --surface-2/3, --accent-soft, --border-soft and --warn, and EVERY * one of those was defined only in app-shell.css, which admin.html does not load. * Measured in the browser: --text-3 was `#8a8fa6` on the coach's page and * `(undefined)` on the desk. Half the sheet resolved to nothing. * * ⚠️ TWO SCOPES, ONE DEFINITION, AND THE SECOND ONE IS THE WHOLE POINT. * * :root the app. app.html links this before app-shell.css; nothing changes. * * .mhq-gl the coach's plan wherever it is rendered, INCLUDING inside a page * with a different palette of its own. admin.html has its own * --surface / --border / --accent for the admin chrome, and must * keep them: this file is linked BEFORE admin's own