/* ========================================================================= NOVA Labs — shared design-token contract (UX overhaul, 2026-06) ONE token vocabulary, TWO intentional themes: • default → "Editorial Indigo / Night" (brand + marketing spine) • [data-theme="ledger"] → "Desert Ledger" light (operator funnel: /brokers, /portal) The connective tissue (focus ring, motion-reduction, 44px target floor, primary-button affordance) is IDENTICAL across both themes, so a visitor crossing the boundary still feels one company. This file is ADDITIVE. Pages keep their existing local styles; tokens.css only (a) guarantees the shared interaction grammar and (b) supplies any token name a page references but had not defined. It must load LAST in so the shared a11y rules win, but it sets variables with @supports-safe fallbacks so it never breaks a page's own palette. ========================================================================= */ /* ---- Shared interaction-grammar tokens (theme-independent) ---- */ :root { --focus-ring: 0 0 0 2px #0a0a0b, 0 0 0 4px #818cf8; --focus-ring-offset: 2px; --tap-min: 44px; --motion-fast: 150ms; --motion-base: 240ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Ledger theme overrides the focus ring so it reads on warm paper */ [data-theme="ledger"] { --focus-ring: 0 0 0 2px #faf7f2, 0 0 0 4px #b9892f; } /* ========================================================================= ACCESSIBILITY — applied site-wide, every page, both themes ========================================================================= */ /* WCAG 2.2 — 2.4.7 / 2.4.13 visible focus. Keyboard users get a strong ring; we never strip an outline without replacing it. Mouse users (no :focus-visible) are unaffected. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* WCAG 2.2 — 2.3.3 reduced motion. Honor the OS setting on EVERY page, including pricing/enterprise/comparison/reviews which previously had none. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* WCAG 2.2 — 2.5.8 target size. Comfortable 44px hit area on the controls that tend to be too small (icon buttons, modal close, inline-link CTAs). We pad the hit area without forcing layout on text links that are part of running prose. */ button, [role="button"], .btn-primary, .btn-secondary, .nav-cta, .nav-login { min-height: var(--tap-min); } .modal-close, .tv-demo-modal-close, .cs-modal-close, [aria-label="Close"] { min-width: var(--tap-min); min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } /* Respect users who set forced-colors / Windows high-contrast */ @media (forced-colors: active) { a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }