/* HIGH-CONTRAST MODE — toggled by the accessibility toolbar (assets/js/ accessibility.js adds `high-contrast` to ; persisted in localStorage and re-applied pre-paint by inc/Hooks/AccessibilityPreferences.php). Strategy: re-map the SEMANTIC + brand colour tokens (defined in common/ tokens.css) so every surface/text pairing clears WCAG (aim AAA). Because components consume tokens and never hard-code colours, overriding the tokens here flows through the whole site. A few extra rules force link underlines and a high-visibility focus ring on top of the token work. NB: html.high-contrast (0,1,1) outranks :root (0,1,0), so these win regardless of file order. Keep assets/css/WCAG-NOTES.md in sync with this palette. */ html.high-contrast { /* Page surface + body text */ --color-bg: #ffffff; --color-text: #000000; /* Headings: brand orange fails as text — use a very dark green (AAA on white). */ --color-heading: #0b3d17; /* Links + focus */ --color-link: #0b3d17; /* dark green, underlined (rule below) */ --color-focus: #0b3d17; /* Stronger neutral hairlines */ --color-border: #1a1a1a; /* Brand palette, darkened so white text on these surfaces clears AAA and any orange text clears AA. */ --color-orange: #9c4a16; /* ~5.7:1 on white */ --color-green: #1f5226; --color-green-dark: #0a2b11; /* footer / dark rows */ --color-green-strong: #123d18; /* primary buttons — white text ≈ AAA */ } /* Always underline links in high contrast (not just on hover). */ html.high-contrast a { text-decoration: underline; text-decoration-thickness: 0.12em; } /* High-visibility focus ring that reads on BOTH light and dark surfaces: a black outline plus a gold halo. */ html.high-contrast :focus-visible { outline: 3px solid #000000; outline-offset: 2px; box-shadow: 0 0 0 5px #ffd34d; } /* Strengthen the toolbar/search control borders on their surfaces. */ html.high-contrast .a11y-tools__btn, html.high-contrast .a11y-tools__group, html.high-contrast .search-form__input { border-color: #000000; }