/* ========================================================================== Atlas Intel — theme.css Semantic colour tokens for the light/dark theme system. This is the FOUNDATION pass only (see js/theme.js + the inline stamp for the mechanism) — most of the site's actual rules still reference the old literal/legacy tokens (--blue, --ink, --off-white, raw #hex, rgba()...) directly and are NOT wired to these yet. That conversion is deliberately left for follow-up passes, file by file, so nothing here silently restyles a page that was never audited for it. NAMING: tokens are named by ROLE ("--atl-srf-raised"), never by appearance ("--grey-800"), so a role can point at a different literal colour per theme without the name lying. Nothing already load-bearing (--blue, --green, --red, --purple, --ink, --off-white, --white, --dark-white, --black, --bg, --mono, --font, --amber, ...) is touched or renamed here — this file only ADDS the --atl-* layer alongside it. NOTE: this codebase does not actually have a pre-existing --atl-* family (grepped dist/ — zero hits before this file); the --atl- prefix here is simply the namespace this pass introduces for the new semantic tokens. LIGHT = today's rendering. The tool/projects pages' light-lavender paper (--off-white #f0f1fa, --white #fff, --ink #111318) is what "light theme" means below — that look is NOT being changed. The hero/header/menu chrome renders dark UNCONDITIONALLY today via the hardcoded [data-glass] rules in glass.css/site.css (not gated on data-theme at all), so toggling the theme currently leaves that chrome untouched — see the report for the follow-up list. DARK is new. It is not "light with the lightness flipped": surfaces are lifted with elevation (page < raised), text avoids pure #fff, grounds avoid pure #000, and every text/surface pair below was checked against WCAG AA (>=4.5:1 normal text, >=3:1 large text/status glyphs). Ratios are recorded in the delivery report, not duplicated here as a comment novel. */ :root{ /* ---- surfaces (elevation: page < raised; sunken is an inset, e.g. a text input's own well, one step BELOW page) */ --atl-srf-page:#f0f1fa; /* == --off-white today */ --atl-srf-raised:#ffffff; /* == --white today (cards, panels) */ --atl-srf-sunken:#e4e6ef; /* == --dark-white today (inputs, wells) */ --atl-srf-glass:rgba(255,255,255,.66); /* frosted tint for future light glass */ /* ---- text */ --atl-tx-primary:#111318; /* == --ink today */ --atl-tx-secondary:rgba(17,19,24,.72); --atl-tx-muted:rgba(17,19,24,.52); --atl-tx-on-accent:#ffffff; /* text/icons sitting ON --atl-accent fills */ /* ---- structure */ --atl-border:rgba(17,19,24,.14); --atl-shadow:rgba(10,12,20,.22); /* matches the menu-card shadow already in site.css */ --atl-scrim:rgba(10,12,20,.45); /* modal/overlay backdrop */ --atl-focus:rgba(26,47,251,.5); /* focus-ring colour, alpha baked in */ /* ---- accent */ --atl-accent:#1a2ffb; /* == --blue today */ --atl-accent-hover:#0016ec; /* == --header-color today */ /* ---- status (AA-checked for TEXT on --atl-srf-page/--atl-srf-raised; the brand's raw --green/--red/--purple stay available unconverted for large fills/icons, where the 3:1 large-text/UI-component floor applies instead — see the report) */ --atl-status-ok:#1a7d43; /* darkened from the site's existing #1f8f4d "ok" green for AA text */ --atl-status-danger:#d93a30; /* darkened from --red (#ff4c41) for AA text */ --atl-status-info:#5b3fd6; /* darkened from --purple (#8832f7) for AA text */ --atl-status-warn:#8a6400; /* new — no existing warn colour in the codebase */ } :root[data-theme="dark"]{ --atl-srf-page:#14161c; --atl-srf-raised:#1c1f28; --atl-srf-sunken:#0f1116; --atl-srf-glass:rgba(20,23,32,.72); --atl-tx-primary:#eef0f5; /* never pure #fff */ --atl-tx-secondary:rgba(238,240,245,.72); --atl-tx-muted:rgba(238,240,245,.52); --atl-tx-on-accent:#0b0d12; --atl-border:rgba(255,255,255,.14); --atl-shadow:rgba(0,0,0,.5); --atl-scrim:rgba(0,0,0,.6); --atl-focus:rgba(106,137,255,.55); --atl-accent:#6a89ff; /* lightened from --blue — #1a2ffb is ~2.5:1 on dark and fails AA there */ --atl-accent-hover:#8aa1ff; --atl-status-ok:#3ddc84; --atl-status-danger:#ff6b60; --atl-status-info:#b18aff; --atl-status-warn:#e0b23d; } /* ========================================================================== Sun/moon theme toggle — the one piece of real UI this pass ships. Reuses .menu-link (site.css) for layout/hover/focus so it sits in #menu-links exactly like the existing nav links and the Download button do (that class already has to support both and