/* ============================================================================
base-aa.css — Renew WDD accessible-by-default foundation (WCAG 2.2 AA)
----------------------------------------------------------------------------
COPY this file into every new site's assets/ and it BEFORE the brand
stylesheet. It defines accessibility PATTERNS only — it sets NO brand colors.
Every color reference is `var(--token, )` pointing at the
per-brand token contract below, which the brand stylesheet fills in.
Canonical reference: [[wdd-design-system-aa]]
(intranet: /company/business-operating-framework/services/
website-design-development-aa-design-system)
============================================================================
---------------------------------------------------------------------------
:root TOKEN CONTRACT — the brand stylesheet MUST define these slots with
AA-passing values. (Listed here as documentation; DEFINE them in brand.css,
not here, so each brand owns its palette.)
| Slot | Purpose / WCAG | Rule |
|--------------------------|-----------------------------------------|---------------------------------------|
| --accent-text-on-light | accent-COLORED text on light bg (1.4.3) | >=4.5:1 on lightest surface |
| --muted-on-light | labels/secondary text on light (1.4.3) | >=4.5:1 on light |
| --caption-on-light | captions/meta on light (1.4.3) | >=4.5:1 (3:1 if large >=18.66px/bold) |
| --muted-on-dark | muted text on dark surfaces (1.4.3) | >=4.5:1 on the dark surface |
| --on-accent | text ON the accent button fill (1.4.3) | >=4.5:1 on the accent fill |
| --focus-accent | focus ring on light surfaces (1.4.11) | >=3:1 vs adjacent colors |
| --focus-accent-dark | focus ring on dark surfaces (1.4.11) | >=3:1 vs the dark surface |
| --surface-dark | a representative dark surface (skip-link bg) | n/a |
Proven fills (two shipped brands — use as worked examples, not as defaults):
HMI (navy/gold): --accent-text-on-light:#7E6212; --muted-on-light:#4E6A93;
--caption-on-light:#52677F; --muted-on-dark:#DFC06F;
--on-accent:#1B2F5E; --focus-accent:#7E6212;
--focus-accent-dark:#DFC06F; --surface-dark:#0E1E3D;
aiwithrenew (orange):--muted-on-light:#5C636B; --caption-on-light:#5C636B;
--muted-on-dark:#9AA1A8; --on-accent:#212529;
--accent-text-on-light:;
--focus-accent:; --focus-accent-dark:;
RECONCILIATION METHOD (per brand, done once, designer-reconciliation gated):
1. Raw brand accent (gold/orange) as normal TEXT on a light fill usually
fails 4.5:1. Darken ONLY the text token (keep the fill for buttons/
decoration) until it clears 4.5:1 on the lightest surface -> that is
--accent-text-on-light.
2. Pick muted/caption slates from the brand family, dark enough for 4.5:1
(a large-text-only token may use the 3:1 floor — label it "large only").
3. --on-accent: a near-black brand-neutral on the accent fill; verify >=4.5:1.
4. Focus tokens: reuse the accent-text token on light; a bright tint on dark.
5. A human designer confirms the chosen values are on-brand AND pass.
Fix contrast at the TOKEN level — one value fixes every instance.
--------------------------------------------------------------------------- */
/* --- Type scale / body-size floor (1.4.4 readability) ----------------------- */
:root {
--fs-body: 1rem; /* 16px floor — never set the base font-size below this */
--lh-body: 1.6;
--measure: 70ch; /* line-length guard (~45-80 chars) for prose blocks */
--target-min: 24px; /* 2.5.8 minimum target size for controls */
}
html { font-size: 100%; } /* respect user zoom; no px root */
body { font-size: var(--fs-body); line-height: var(--lh-body); }
/* --- Skip link (2.4.1 bypass blocks) --------------------------------------- */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 1000;
background: var(--surface-dark, #111); color: #fff;
padding: 10px 16px; border-radius: 0 0 6px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* --- Visually-hidden helper for screen-reader-only labels (1.1.1 / 1.3.1) --- */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --- landmark (1.3.1 region) ---------------------------------------- */
main { display: block; } /* every page wraps its primary content in one */
/* --- Visible keyboard focus (2.4.7 / 2.4.11) ------------------------------- *
* Parameterized by --focus-accent (light) / --focus-accent-dark (dark).
* Mechanics proven on HMI (S88): for "stretched anchor" cards (an with
* position:absolute; inset:0 filling a card that has overflow:hidden), the
* anchor's own outline gets clipped — so suppress it on the anchor and draw the
* ring on the CONTAINER instead (an element's own outline is NOT clipped by its
* own overflow:hidden). Brands add their card/dark selectors to these hooks
* (class .aa-card / .aa-card-link / .aa-dark) or extend the selector lists. */
:focus-visible {
outline: 3px solid var(--focus-accent, #1a5fb4);
outline-offset: 2px;
border-radius: 2px;
}
.aa-card-link:focus-visible { outline: none; } /* suppress the clipped child outline */
.aa-card:has(.aa-card-link:focus-visible) {
outline: 3px solid var(--focus-accent, #1a5fb4);
outline-offset: 3px;
}
.aa-dark :focus-visible { outline-color: var(--focus-accent-dark, #ffd866); }
/* --- Target size (2.5.8) — control minimums --------------------------------- *
* Applied to control-like elements only. Inline links inside prose are EXEMPT
* under 2.5.8's inline exception — do NOT force min-height on in body copy. */
.btn, button, [role="button"] { min-height: var(--target-min); min-width: var(--target-min); }
/* --- Reduced-motion guard (respects prefers-reduced-motion) ----------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}