/* * Health Bridge design tokens — single source of truth. * Spec: Current Clients/Health Bridge/Website Redesign/HB_Website_Design_Brief.md * Nobody hardcodes a hex outside this file. */ :root { /* Health Bridge (parent) */ --hb-blue: #263686; --hb-sky: #29B7DF; --hb-mint: #A4CBAC; /* OroMed */ --om-green: #3B6559; /* OroSight — blue-primary, rust accent. Rust A pending Becky's final pick; #BF5528 restricted to large graphic fills. */ --os-rust: #A0451F; --os-orange-graphic: #BF5528; /* Optimize Practice Alliance */ --opa-gold: #DAB66D; --opa-gold-text: #9A6215; /* text-safe on white (4.5+); warm amber, no olive cast */ --opa-gold-tint: #F7F3E8; --opa-silver: #C1C0C5; /* Hero-eyebrow text colors — WCAG AA (4.5:1) against the hero gradients. The base brand hexes above fail as 13px text on those gradients (mint 3.6, sky 2.74, gold-on-gold 4.09), so eyebrows in a hero use these instead. Ratios measured against each gradient's worst-case stop, 2026-08-11. Do NOT swap these back to the base tokens — the base values stay correct for fills, tints, and graphics, which is where they belong. */ --hb-mint-hero-text: #C4E3CB; /* 4.66:1 on the navy hero */ --hb-sky-hero-text: #A8E4F5; /* 4.63:1 on the navy hero */ --opa-gold-hero-text: #4A2F0A; /* 5.19:1 on the gold hero */ /* OroLink — reserved, brand deferred from site */ --ol-plum: #763A68; /* Neutrals (blue-biased, never cream) */ --ink: #1B2137; --body-text: #3A3F52; --text-soft: #6A7086; --mist: #F4F6FA; --mint-tint: #EDF4EF; --rust-tint: #F6ECE6; --line: #E3E7EF; --footer-bg: #14172B; /* Type */ --font-heading: 'Futura Hv BT', 'Futura-Bold', Futura, Jost, 'Century Gothic', 'Trebuchet MS', sans-serif; --font-body: 'Futura Bk BT', Futura, Jost, 'Century Gothic', 'Trebuchet MS', sans-serif; /* Scale (desktop; mobile overrides below) */ --fs-display: 56px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 22px; --fs-body-lg: 19px; --fs-body: 17px; --fs-caption: 13px; --fs-eyebrow: 13px; /* Spacing (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px; --radius-card: 8px; --radius-btn: 12px; /* was 6px — read as square on 56px page buttons; 12px matches the header CTA's corner-to-height proportion (Becky 2026-07-14) */ --content-max: 1200px; /* Active brand tokens — parent defaults; sections override */ --brand-primary: var(--hb-blue); --brand-accent: var(--hb-sky); --brand-tint: var(--mist); --brand-accent-text: var(--hb-blue); } /* Brand section scopes — set on via template or on a wrapping block */ .brand-hb { --brand-primary: var(--hb-blue); --brand-accent: var(--hb-sky); --brand-tint: var(--mist); --brand-accent-text: var(--hb-blue); } .brand-oromed { --brand-primary: var(--om-green); --brand-accent: var(--hb-mint); --brand-tint: var(--mint-tint); --brand-accent-text: var(--om-green); } .brand-orosight { /* Blue-primary, rust accent — locked rule (rust-primary preview still pending Becky) */ --brand-primary: var(--hb-blue); --brand-accent: var(--os-rust); --brand-tint: var(--rust-tint); --brand-accent-text: var(--os-rust); } .brand-optimize { /* Navy stays primary for bands/buttons; the gold hero is scoped in hb-components.css (Becky picked black-on-gold hero, 2026-07-15) */ --brand-primary: var(--hb-blue); --brand-accent: var(--opa-gold); --brand-tint: var(--mist); --brand-accent-text: var(--opa-gold-text); } @media (max-width: 900px) { :root { --fs-display: 38px; --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 20px; --fs-body-lg: 18px; --fs-body: 16px; } }