/** * Atelier — derived tokens. Computed from the 6 base + 3 state vars set by * web/css/tokens/_palette-*.css, so this file needs no palette-specific values * and works identically under every [data-atl-palette] value. * * Rule: component/page CSS must use these, not invent its own color-mix() ratio. * (Playbook §6.2 "no hard-coded colors" extends to ad-hoc derived-color ratios — * a page that mixes its own 14% vs another page's 10% "border" drifts silently.) */ /* Scope: MUST include [data-atl-palette], not just :root. The base palette vars * (--atl-bg/--atl-text/--atl-accent) are set on the element carrying the * data-atl-palette attribute (the , per default.xml) — NOT on :root (html). * A derived token like `--atl-band-text: var(--atl-bg)` declared on :root resolves * var(--atl-bg) against HTML's value, which is only ever the Ivory default (Ivory * alone also seeds bare :root). So under any non-default palette (Noir/Rose/Sage/ * Cobalt) every derived token silently computed against IVORY — e.g. Noir's primary * button (background:var(--atl-text) cream, color:var(--atl-band-text)=Ivory light) * rendered a near-invisible label. Declaring these on [data-atl-palette] too makes * them compute on the same element as the active palette's base vars. (Caught by the * Noir palette sweep, 2026-07-14.) */ :root, [data-atl-palette] { --atl-border: color-mix(in oklab, var(--atl-text) 10%, var(--atl-bg)); --atl-border-strong: color-mix(in oklab, var(--atl-text) 35%, var(--atl-bg)); --atl-text-muted: color-mix(in oklab, var(--atl-text) 65%, var(--atl-bg)); --atl-text-subtle: color-mix(in oklab, var(--atl-text) 50%, var(--atl-bg)); --atl-accent-hover: color-mix(in oklab, var(--atl-accent) 85%, black); --atl-focus-ring: color-mix(in oklab, var(--atl-accent) 60%, var(--atl-bg)); --atl-band-text: var(--atl-bg); --atl-accent-tint: color-mix(in oklab, var(--atl-accent) 6%, var(--atl-surface)); --atl-overlay-scrim: color-mix(in oklab, var(--atl-text) 72%, var(--atl-bg)); --atl-shadow-tint: color-mix(in oklab, var(--atl-text) 25%, transparent); } /* * Base document wiring. The preview harness (web/preview/*.html) only ever set * this in each file's own dev-only