/* tokens-colors-v1 — W-56-1 — Saadjie color token layer. */ /* palette-themes-v1 — W-58-1 — Warm-earth brand + explicit theme selectors. */ /* * Planning: .archon/queued-builds/WAVE-56-design-tokens.md * .archon/queued-builds/WAVE-58-color-palette.md * * WHY this file exists: every component stylesheet below this layer * references colour through `var(--color-*)`. Raw hex / rgba in any other * file is rejected by the W56 ANTI-RAW-VALUE proof-gate (and by * stylelint.config.js / .eslintrc.js shipped in W-56-4). Centralising the * palette here means future palette rotations touch ONE file. * * WHY warm-earth brand (W-58-1 update): the Saadjie brand is anchored to * the character art — warm earth tones (terracotta, sand, sage). The * previous mid-blue (#3366aa) inherited from the per-child themeColor * default conflated the *site* brand with a *child profile* default. * W58 decouples them: the global chrome (header, primary CTAs, focus * ring) now reads warm; the per-child hero block continues to honour the * stored themeColor (still defaulted to #3366aa in src/models/children.js * for backwards compatibility with existing rows). * * WHY three brand families (terracotta + sand + sage) rather than one: * - Terracotta is the primary action / focus / link colour. Warm, * inviting, distinct from the blue/gray of generic SaaS chrome. * - Sand sits as a tertiary surface / divider tone, lifting cards off * the page without competing with content. * - Sage is the success/positive accent and a complementary cool note * against the warm primary — balances the palette without going * fully analogous. * * WHY explicit [data-theme="light"] / [data-theme="dark"] selectors AND * prefers-color-scheme media query: the media query covers the "no * parent preference set, follow OS" case. The attribute selectors let * the parent's saved preference (W-58-2 theme.js) override the OS hint * by writing `data-theme="light"` or `data-theme="dark"` on . * Specificity: [data-theme] on :root beats the media query, so an * explicit choice always wins. * * WHY split out of public/css/tokens.css (the W26 aggregate): a single * monolithic tokens file made it hard to reason about which tokens belong * to which concern. W56 splits the tokens into modular files * (colors / spacing / typography / radius / shadow / motion) so a future * theme override can swap one slice without touching the rest. The legacy * public/css/tokens.css is left untouched for backwards compatibility — * W57+ rewires components onto this layer. * * WHY :root scope (not a class): tokens must be available to every node * in the document, including nodes rendered before component CSS loads * (the inline