/* ============================================================================= TOKENS.CSS — Design tokens for expeal.com Source: docs/audits/epic-1.2/design-direction.md v0.2 §§3, 4, 6, 8 Story: 1.3.2 — CSS architecture + design tokens This file declares custom properties only. No selectors beyond :root and no rules with side effects. Consuming files (base.css, prose.css, layout.css, components.css, page CSS) reference these via var(). Changing a color, a type step, or a spacing increment happens here, once, and propagates to every consuming file. Load order: tokens.css → base.css → prose.css → layout.css → components.css → [page-specific CSS]. Each consuming file assumes tokens are resolved. ============================================================================= */ :root { /* =========================================================================== 1. COLOR (design-direction §3) =========================================================================== */ /* --- Brand anchors (inherited from brand-anchors.md) --- */ --expeal-purple: #3C3B6E; /* Primary brand. US-flag navy. */ --expeal-red: #B22234; /* Secondary brand. Old Glory red. Formalized 1.3.2 (§3.1). */ /* --- Brand tints (derived from --expeal-purple for hover/tint surfaces) --- */ --expeal-purple-dark: #2E2D56; /* ~18% darker — primary-CTA hover (§11.1). */ --expeal-purple-tint: #E0DFE9; /* Low-intensity purple mixed with surface — optional. */ /* --- Warm neutral spine (§3.2) --- */ /* The warm cast distinguishes Expeal from nonprofit-navy-on-white and SaaS-gray-on-white registers. See §2.1. */ --surface-primary: #FBFAF5; /* Warm off-white page background. */ --surface-elevated: #FFFFFF; /* True white for cards, modals (§6.6 Level 1/2). */ --ink-body: #1A1A22; /* Near-black body text. See contrast-verification. */ --ink-muted: #5A5A66; /* Muted text — captions, metadata. */ /* Two border tokens — one decorative (low contrast; used where border is aesthetic only), one interactive (hits WCAG 1.4.11 3:1 against surfaces; used where a border identifies an interactive UI component — form inputs, focusable card edges, disabled-state affordances). */ --border-subtle: #E4E2DB; /* Decorative — dividers, section breaks, non-interactive card outlines. */ --border-interactive: #8F8C83; /* Interactive — form input borders, focusable controls. 3:1 on surfaces. */ /* --- Informational accent (§3.3) --- */ /* Distinct from --expeal-purple so links don't collapse into brand color. Browser convention reads blue-underline as "link." */ --accent-info: #4A6FA5; /* Muted secondary blue — links, info callouts. */ --accent-info-hover: #3D5E8F; /* Darker variant for link hover / focus fill. */ /* --- Functional accents (§3.4) --- */ /* Semantic domains are separated: brand emphasis uses --expeal-red; form validation errors use --color-error-form. They are never swapped. */ --color-success: #0B6E3F; /* Forest green — eligibility "qualifies" (§11.4). */ --color-warning: #B45309; /* Warm amber — eligibility "may qualify" (§11.4). */ --color-error-form: #B0261A; /* Form validation errors ONLY. Not brand. */ /* =========================================================================== 2. TYPOGRAPHY (design-direction §4) =========================================================================== */ /* --- Type family (§4.2–4.3) --- */ /* Atkinson Hyperlegible — humanist sans designed by Braille Institute for low-vision accessibility. Self-hosted at src/assets/fonts/atkinson-hyperlegible/. Single family covers display and body (§4.1). System-font fallback matches the humanist register so first paint before web font load is not jarring. */ --font-sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; /* Monospace stack for the transparency widget (§11.6) and code. System-only — no third family bundled. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* --- Type scale (§4.4) — fluid on display, static elsewhere --- */ /* Base 18px. Modular ratio 1.25 (major third). Display sizes use clamp() so they scale smoothly between --bp-md and --bp-xl rather than jumping at a breakpoint. */ --fs-display-1: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); /* 40px → 56px */ --fs-display-2: clamp(2.125rem, 1.75rem + 1.875vw, 2.75rem); /* 34px → 44px */ --fs-h1: 2.125rem; /* 34px — content-page H1 */ --fs-h2: 1.75rem; /* 28px — section headings */ --fs-h3: 1.375rem; /* 22px — sub-section headings */ --fs-h4: 1.125rem; /* 18px — minor headings, inline labels */ --fs-body: 1.125rem; /* 18px — body (§9 non-negotiable minimum) */ --fs-body-lg: 1.25rem; /* 20px — intro paragraphs, dek lines */ --fs-caption: 0.875rem; /* 14px — metadata, "last reviewed" stamps */ --fs-micro: 0.75rem; /* 12px — legal fine print only */ /* --- Line heights --- */ --lh-tight: 1.1; /* Hero display type */ --lh-snug: 1.2; /* Display-2, H1 */ --lh-heading: 1.3; /* H2, H3 */ --lh-base: 1.4; /* Minor headings, UI text */ --lh-body: 1.6; /* Body default */ --lh-relaxed: 1.7; /* Long-form prose paragraphs (§4.6) */ /* --- Weights (§4.5) --- */ --fw-regular: 400; /* Body */ --fw-medium: 500; /* Captions, inline emphasis */ --fw-semibold: 600; /* H2–H4, button labels, nav */ --fw-bold: 700; /* Display, H1, statute citations */ /* =========================================================================== 3. SPACING (design-direction §6.2) — 8pt base =========================================================================== */ /* Usage (§6.2): Within a component: 1–3 Between components, section: 4–5 Between sections: 6–7 Hero-to-first-block: 7 minimum The scale trades information density for calm — supporting the civic-gravity register (§2.1). */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2rem; /* 32px */ --space-6: 3rem; /* 48px */ --space-7: 4rem; /* 64px */ --space-8: 6rem; /* 96px */ --space-9: 8rem; /* 128px */ /* =========================================================================== 4. LAYOUT (design-direction §6.1) =========================================================================== */ /* Content widths. Body prose lives at --content-narrow; illustrations, tables, comparison strips can break out to --content-wide; full-bleed heroes and ultra-wide surfaces sit at --content-full (the cap). */ --content-narrow: 42rem; /* 672px — 65–75 char line at 18px body (§4.6, §6.1) */ --content-wide: 60rem; /* 960px — wide illustrations, tables (§6.1) */ --content-full: 80rem; /* 1280px — hero full-bleed / container cap (§6.1) */ /* Container outer padding (inline only). Scales at breakpoints in layout.css. */ --container-padding-inline: var(--space-4); /* 24px mobile default (§6.1) */ /* Touch targets — §9 non-negotiable baseline (WCAG 2.5.5 best practice). */ --touch-target-min: 2.75rem; /* 44px */ /* =========================================================================== 5. ELEVATION (design-direction §6.6) — three levels, no more =========================================================================== */ /* Level 0 is the default; most surfaces are flat. Level 1 is for cards and sticky nav on scroll — subtle; not glossy. Level 2 is for floating surfaces (modals, dropdowns) — visible but calm. */ --elev-0: none; --elev-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.08); --elev-2: 0 4px 6px rgb(0 0 0 / 0.05), 0 10px 15px rgb(0 0 0 / 0.10); /* =========================================================================== 6. RADII + FOCUS =========================================================================== */ --radius-sm: 0.25rem; /* 4px — inputs, small controls */ --radius-md: 0.5rem; /* 8px — buttons, cards (§6.5) */ --radius-lg: 0.75rem; /* 12px — large cards, featured surfaces */ --radius-pill: 9999px; /* Pill shape for badges */ /* Focus ring — §9 non-negotiable: always visible, ≥ 3:1, ≥ 2px thick. Default (--focus-ring-color) is --accent-info — works on surfaces. When a focused element sits on a dark background (primary CTA, --expeal-purple header nav, --expeal-red contexts), components override with --focus-ring-color-inverse (white) to maintain ≥ 3:1 against the dark bg. See contrast-verification table for measured ratios. */ --focus-ring-color: var(--accent-info); --focus-ring-color-inverse: var(--surface-elevated); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* =========================================================================== 7. MOTION (design-direction §8) =========================================================================== */ /* §8.2: restrained — 100–200ms ease-out. No "springy" easing curves. prefers-reduced-motion globally collapses these to 0.01ms in base.css. */ --transition-fast: 100ms ease-out; /* Focus-indicator transitions */ --transition-base: 150ms ease-out; /* Hover state transitions */ --transition-slow: 200ms ease-out; /* Dropdown expand/collapse */ /* =========================================================================== 8. BREAKPOINTS =========================================================================== */ /* Modern three-breakpoint system (rescoped 2026-04-22 from USWDS-inherited 640/768/1024/1280 ladder). Tuned to 2026 device reality — design-direction v0.3 §6.3 carries the rationale. CSS custom properties CANNOT be used inside @media conditions. These constants are documented here for reference and cross-file consistency; actual @media queries in layout.css use the em values literally. --bp-md (46rem / 736px) — single-column → multi-column pivot. Triggers for iPad Mini portrait (744px) and foldables unfolded. Large phones in portrait stay single-column. --bp-lg (68rem / 1088px) — full multi-column; sidebar-capable. Triggers for iPad Air landscape (1180px), small laptops, Chromebooks. Desktop nav opens. --bp-xl (90rem / 1440px) — container width cap. Standard laptop (1440) triggers; wider displays see margins grow, content holds at cap. Container queries (@container) carry component-local responsiveness — components care about their container's inline size, not the viewport. See layout.css for container-type declarations. */ --bp-md: 46rem; --bp-lg: 68rem; --bp-xl: 90rem; }