/* ========================================================================== Design tokens Values captured from the currently-live site (index.html + contact.html, both themes, 1440px) on 2026-07-29, before any shared CSS was written. Preserve, don't redesign — see Step 4 report for full measurement notes. ========================================================================== */ :root { /* ---- canonical breakpoints (px) ---- 430 narrow phones / compact header adjustments 640 standard mobile layout + typography 900 navigation switch + major one-column stacking 1100 wide-layout adjustments (4→2 col grids, hero proportions) */ /* ---- semantic color tokens (light — default) ---- */ --page-bg: #ffffff; --section-bg: transparent; /* sections currently show the page gradient through; no distinct alternating bg exists today */ --surface-bg: #ffffff; /* cards, FAQ items, dropdown/menu panel */ --surface-muted-bg: #f8fbfd; /* form inputs, recessed surfaces */ --text-primary: #526071; --text-secondary: #526071; /* identical to text-primary in light mode today; kept distinct for dark mode + future flexibility */ --heading-color: #09132d; --border-color: rgba(9, 19, 45, 0.12); --shadow-color: rgba(0, 23, 70, 0.06); --accent-color: #01d284; /* green — backgrounds, borders, icons, dots, decorative lines, focus rings. NOT for text on light surfaces (measured 1.99:1 on white) */ --accent-label-color: #2d3a4f; /* neutral slate-navy for noninteractive labels (eyebrows, kickers, signal/fit labels) on light surfaces — roughly midway between --heading-color and --text-secondary; 11.48:1 on #ffffff, 11.04:1 on #f8fbfd */ --link-color: #2d3a4f; /* neutral slate-navy for genuine links (card links, FAQ links, service-guide links) on light surfaces; same value as --accent-label-color today but a separate token on purpose - labels and links are different roles and may diverge later. Bright --accent-color measured 1.84–1.99:1 on every real light-mode background these selectors use, so it can't be used for link text (default or hover) in light mode either. */ --nav-link-active-bg: rgba(1, 210, 132, 0.1); /* identical in both themes */ --accent-hover-border: rgba(1, 210, 132, 0.36); /* identical in both themes; shared by .card-base, .related-link-card, .helps-service-card hover borders */ --cta-gold: #efb614; /* second brand accent — primary buttons only, not folded into --accent-color */ --cta-gold-hover: #c89500; --success-color: #2d3a4f; /* form/status success text; same rendered value as --accent-label-color/--link-color today, but its own token since success feedback is a distinct semantic role - 11.48:1 on #ffffff */ --error-color: #c22a30; /* form/status error text; 5.73:1 on --surface-bg (#ffffff) */ --placeholder-color: #5f6b7c; /* opaque (not text-color+opacity, for predictable contrast); 5.21:1 on --surface-muted-bg #f8fbfd */ /* page-background gradient recipe (kept as a documented formula, not a single flat token, so the subtle radial tint is preserved) */ --page-gradient: radial-gradient(circle at 82% 8%, rgba(53, 107, 248, 0.055), transparent 40%), radial-gradient(circle at 8% 8%, rgba(1, 210, 132, 0.05), transparent 38%), linear-gradient(180deg, #ffffff 0%, #f8fbfd 28%, #ffffff 62%, #fbfcfd 100%); /* component-specific values that don't cleanly map to the generic tokens above — documented here rather than forced into the wrong token */ --header-bg: rgba(255, 255, 255, 0.96); --menu-panel-bg: #ffffff; /* solid - was rgba(255,255,255,0.98), which let hero/page text bleed through the open mobile menu and Services dropdown; #ffffff matches --surface-bg (cards/FAQ) and is the composited equivalent of the old alpha value */ --theme-toggle-track-bg: #e8ebf0; --theme-toggle-thumb-bg: #09132d; --theme-toggle-thumb-icon-color: #ffffff; /* sun/moon glyph inside the thumb; must contrast the thumb, not the track */ --mobile-menu-toggle-bg: #f1f3f6; --cta-box-bg: #09132d; /* final CTA panel is deliberately dark-on-light in light mode */ --cta-box-heading-color: #ffffff; --cta-box-body-color: #ffffff; --btn-secondary-bg: rgba(255, 255, 255, 0.75); --btn-secondary-border: rgba(53, 107, 248, 0.24); --back-to-top-shadow: rgba(0, 23, 70, 0.16); /* stays constant across both themes */ --footer-bg: #09132d; --footer-text: rgba(255, 255, 255, 0.68); --footer-link: rgba(255, 255, 255, 0.82); /* type scale Approved decision: Noto Sans site-wide, no Inter/Montserrat, regardless of what the legacy production cascade currently renders (its "Noto Sans" declaration at styles.css:27 is dead — beaten by a later !important rule at styles.css:5942 that actually paints Inter/ Montserrat). This foundation does not carry that forward. One font family, weight does all the differentiation work — no separate "label" font family. Loaded weights: 400, 500, 600, 700, 800 (see base.css for the Google Fonts URL). Never use 650/750/850 — those aren't loaded and were a legacy artifact of Inter's variable-weight range. */ --font-body: "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --h1-size: clamp(2.75rem, 7vw, 5.7rem); --h2-size: clamp(2rem, 4vw, 3.3rem); --h3-size: 1.35rem; --body-size: 1rem; --lead-size: clamp(1.08rem, 2vw, 1.28rem); /* supporting-text sizes (readability audit): the floor for anything smaller than --body-size that still carries real reading content — card/list/table copy, notes, labels. Not used by headings or --lead. */ --fs-secondary: 1rem; /* 16px — card, list, and table body copy */ --fs-note: 0.9375rem; /* 15px — pricing notes, form helper/privacy/status text */ --fs-label: 0.85rem; /* 13.6px — eyebrows/kickers (matches prior .eyebrow value) */ --fs-label-sm: 0.8rem; /* 12.8px — compact eyebrow-tier labels previously at .78rem */ /* weights / tracking Weight system: body/supporting copy 400; medium emphasis 500-600; navigation 600-700; buttons 700; card headings 700; main headings 800; eyebrows/compact labels 700-800. Tracking is canonicalized from the site's dominant values; the legacy CSS layered several page-specific micro-tracking overrides (e.g. -0.034em on certain hero h1s vs the -0.026em base) accumulated as one-off "kerning lock" patches — this foundation normalizes to one shared scale rather than reproducing each variant. Noto Sans is a rounder, less condensed face than Inter at the same tracking values; re-measured after the font swap (see Step 4 correction report) and the values below still read cleanly at every size in the scale. */ --h1-weight: 800; --h2-weight: 800; --h3-weight: 700; --h1-tracking: -0.02em; --h2-tracking: -0.018em; --h3-tracking: -0.008em; --h3-tracking-tight: -0.03em; /* card headings only — see cards.css .card-base h3 */ --h1-line-height: 1.12; --h2-line-height: 1.1; --body-line-height: 1.6; /* shape / elevation */ --radius-card: 22px; --radius-panel: 24px; --shadow-card: 0 14px 34px var(--shadow-color); --max-width: 1160px; /* icon sizes — sm/md cover the shared .icon-card component (cards.css); lg/xl cover the shared .hero-card__media component (hero.css), consolidated in Phase 2C. */ --icon-size-sm: 100px; --icon-size-md: 120px; --icon-size-lg: 124px; --icon-size-xl: 150px; } :root[data-theme="dark"], body.dark-theme { --page-bg: #09132d; --section-bg: transparent; --surface-bg: rgba(16, 29, 52, 0.96); --surface-muted-bg: #0b172b; --text-primary: #f4f7fb; --text-secondary: #d8e1ee; --heading-color: #ffffff; --border-color: rgba(255, 255, 255, 0.13); --shadow-color: transparent; /* cards/FAQ carry no shadow in dark mode today */ --accent-color: #01d284; /* confirmed identical to light mode */ --accent-label-color: #a9b4c4; /* neutral slate-blue (not bright green) for noninteractive label text on dark surfaces - keeps the decorative line/icons/borders on --accent-color while the label text itself stays muted; lightened from an earlier #97a2b3, which read as too faded against the dark background despite passing contrast; 8.76:1 on --page-bg #09132d, 8.06:1 on card surfaces */ --link-color: var(--accent-color); /* bright green already passes here (9.24:1 on --page-bg, 8.49:1 on card surfaces), so genuine links keep the brand green in dark mode - only light mode needed a neutral substitute */ --cta-gold: #efb614; /* confirmed identical to light mode */ --cta-gold-hover: #c89500; --success-color: var(--accent-color); /* bright green already passes here (9.24:1 on --page-bg, 8.49:1 on card surfaces), matching --link-color's dark-mode value */ --error-color: #ff8a8a; /* lightened for dark mode; 7.42:1 on --surface-bg composited over the dark page gradient */ --placeholder-color: #7e8ba0; /* opaque; 5.20:1 on --surface-muted-bg #0b172b */ --page-gradient: radial-gradient(circle at 82% 8%, rgba(1, 210, 132, 0.035), transparent 42%), radial-gradient(circle at 8% 8%, rgba(53, 107, 248, 0.028), transparent 40%), linear-gradient(180deg, #09132d 0%, #0a1730 32%, #09132d 72%, #081225 100%); --header-bg: #09132d; --menu-panel-bg: #101d34; /* solid - was rgba(16,29,52,0.96), which let hero/page text bleed through the open mobile menu and Services dropdown; #101d34 is the composited equivalent of the old alpha value (matches --mobile-menu-toggle-bg, already documented as "dark surface matching --menu-panel-bg") */ --theme-toggle-track-bg: #0a235f; --theme-toggle-thumb-bg: #d4dae2; --theme-toggle-thumb-icon-color: #09132d; /* dark thumb here is light gray, so the glyph goes dark */ --mobile-menu-toggle-bg: #101d34; /* dark surface matching --menu-panel-bg; was incorrectly copied from --theme-toggle-thumb-bg's light gray */ --cta-box-bg: rgba(16, 29, 52, 0.96); /* converges with regular surface-bg in dark mode */ --cta-box-heading-color: #ffffff; --cta-box-body-color: #d8e1ee; --btn-secondary-bg: transparent; --btn-secondary-border: rgba(255, 255, 255, 0.22); --back-to-top-shadow: rgba(0, 23, 70, 0.16); --footer-bg: #09132d; --footer-text: rgba(255, 255, 255, 0.68); --footer-link: rgba(255, 255, 255, 0.78); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.dark-theme-managed) { /* Intentionally empty: this site's dark mode is opt-in via the theme toggle + cookie (see scripts/site.js), not the OS preference. The toggle applies body.dark-theme directly, which the block above already covers. This block exists only so a future OS-driven mode has a documented, empty hook rather than silently missing one. */ } }