/* Two independent token axes, per the locked Option B direction: 1. SURFACE — which of the three brand tones a section sits on (--surface-brand / --surface-alt / --surface-base). Set by a CSS class on the section (see components/section.njk), never by theme. 2. THEME — light or dark. Set by [data-theme] on (see js/theme-toggle.js). Redefines what each surface token resolves to. A section never knows or cares which theme is active; the toggle never knows or cares which surface a section uses. They compose through CSS variables alone. */ :root { /* Option B raw palette: bold, saturated navy blue — reads as a real graphic color (diagonal panels, dividers), not just a quiet background — while staying short of deep/heavy or charcoal. */ --axg-navy: #1B4A82; --axg-navy-deep: #163A66; --axg-gray-light: #F1F3F6; --axg-white: #FFFFFF; --axg-ink: #14202B; /* Single accent, used exclusively for CTAs/links */ --axg-accent: #E8A33D; --axg-accent-hover: #CE8A28; --axg-accent-text: #14202B; /* Surface tokens — light theme (default) */ --surface-brand: var(--axg-navy); --surface-alt: var(--axg-gray-light); --surface-base: var(--axg-white); --text-on-brand: #FFFFFF; --text-on-alt: var(--axg-ink); --text-on-base: var(--axg-ink); --text-muted-on-brand: rgba(255, 255, 255, 0.72); --text-muted-on-alt: rgba(20, 32, 43, 0.65); --text-muted-on-base: rgba(20, 32, 43, 0.65); --border-on-brand: rgba(255, 255, 255, 0.16); --border-on-alt: rgba(20, 32, 43, 0.12); --border-on-base: rgba(20, 32, 43, 0.12); /* ACCENT AS FILL vs ACCENT AS INK -- two jobs, two tokens. The bright amber is a FILL colour: ink-on-amber measures 7.7:1, so buttons, badges and step numbers are fine. As TEXT on a light surface the same value measures 2.16:1 on white and 1.94:1 on the gray -- both well under the 4.5:1 AA floor, and the site uses it for every inline link. One name doing two jobs is the bug; these are the two names. There are three ink values because a single one cannot work: darkening the amber enough for white also sinks it against the brand navy. So the ink token is surface-scoped, exactly like --text-on-* above, and style.css binds --accent-ink per section class. Measured (see the contrast table in LAUNCH_READINESS.md): #966112 on white 5.23:1 on gray 4.70:1 #EFBE76 on navy 5.24:1 */ --accent: var(--axg-accent); --accent-hover: var(--axg-accent-hover); --accent-text: var(--axg-accent-text); --accent-ink-on-base: #966112; --accent-ink-on-alt: #966112; --accent-ink-on-brand: #EFBE76; --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius-sm: 6px; --radius-md: 10px; --container-width: 1120px; } /* Theme redefinition — dark mode shifts the gray/white sections toward navy and keeps the brand section from going full black, per roadmap. */ [data-theme="dark"] { --surface-brand: #12305A; --surface-alt: #16283D; --surface-base: #0B1A2B; --text-on-brand: #F5F7FA; --text-on-alt: #E7ECF2; --text-on-base: #E7ECF2; --text-muted-on-brand: rgba(245, 247, 250, 0.68); --text-muted-on-alt: rgba(231, 236, 242, 0.62); --text-muted-on-base: rgba(231, 236, 242, 0.62); --border-on-brand: rgba(255, 255, 255, 0.14); --border-on-alt: rgba(255, 255, 255, 0.09); --border-on-base: rgba(255, 255, 255, 0.09); /* In dark mode the surfaces are dark enough that the ORIGINAL bright amber is the accessible choice on all three -- 8.14:1 on base, 6.93:1 on alt. The darkened light-theme value would be the failure here, which is the whole reason these are theme-aware rather than one fixed hex. */ --accent-ink-on-base: var(--axg-accent); --accent-ink-on-alt: var(--axg-accent); --accent-ink-on-brand: var(--axg-accent); }