/* ========================================================================== BBN Design Tokens — Vivid (Full Spectrum) Source of truth: DESIGN-README.md §Design Tokens + DESIGN.md rulings. Precedence: DESIGN.md > DESIGN-README.md > .dc.html visuals. ========================================================================== */ :root { /* Backgrounds */ --bg: #090A0F; /* page background — near-black, cool. Set on . */ --bg2: #0E0F18; /* elevated surface (cards, sections) */ --bg3: #161828; /* highest surface */ /* Primary accents */ --blue: #3568C4; /* primary — CTAs, links, key numbers */ --blue-d: #2451A4; /* hover/pressed blue */ --ind: #5B4ACA; /* indigo — secondary, gallery, commercial */ --gold: #C69C3A; /* WARRANTY ONLY (+ star ratings) — never a general accent */ --gold-d: #D4AA40; /* gold hover */ /* Extended palette (Vivid variant) */ --red: #C43535; /* Christmas */ --orange: #C4681A; /* Pricing accents / OK / Comparison blog */ --teal: #0E8E72; /* City, Residential, Blog how-to */ --teal-d: #0A6E58; /* teal hover */ --purple: #8B30C4; /* Gallery */ --rose: #B83078; /* Reviews */ --rose-d: #962560; /* rose hover */ /* Text */ --text: #E2E4EE; /* body — 13.7:1 on --bg */ --muted: #7C84AC; /* secondary — nudged up from spec #7279A0 so it also clears AA (>=4.5:1) on ELEVATED surfaces (tinted cards #0E0F18, form shell). #7279A0 only cleared AA on the pure page bg and dipped to ~4.4 on tints. */ --dim: #3A3D52; /* DECORATIVE ONLY — fails AA (~1.9:1). Hairlines/disabled/watermark numerals */ /* Borders / hairlines */ --bdr: rgba(255,255,255,0.07); --bdr2: rgba(255,255,255,0.12); /* Type */ --f-head: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Layout */ --container: 1300px; --pad: 48px; /* container side padding (desktop) */ --radius: 2px; /* sharp everywhere */ --nav-h: 64px; /* Section-accent hook — each page/section overrides these, and all tinted cards / accents read from them. --accent : saturated accent for borders, fills, large text (>=24px / >=18.66px bold) --accent-text : LIGHTENED accent for small text (labels, links, ghost-btn text) so it clears WCAG AA (>=4.5:1) on the dark bg. The saturated accents sit at 2.98-3.7:1 as small text, which fails; these lightened values pass. */ --accent: var(--blue); --accent-d: var(--blue-d); --accent-text: #7AA5E8; --accent-rgb: 53,104,196; /* rgb triplet of --accent, for rgba() tints */ } /* Per-surface accent classes. Set on or a section wrapper. Sets --accent, --accent-d, --accent-text, --accent-rgb together so components stay in sync. */ .acc-blue { --accent:var(--blue); --accent-d:var(--blue-d); --accent-text:#7AA5E8; --accent-rgb:53,104,196; } .acc-teal { --accent:var(--teal); --accent-d:var(--teal-d); --accent-text:#35C6A6; --accent-rgb:14,142,114; } .acc-indigo { --accent:var(--ind); --accent-d:#4638A8; --accent-text:#9585EE; --accent-rgb:91,74,202; } .acc-purple { --accent:var(--purple); --accent-d:#701F9E; --accent-text:#C566F0; --accent-rgb:139,48,196; } .acc-rose { --accent:var(--rose); --accent-d:var(--rose-d); --accent-text:#EA6BA6; --accent-rgb:184,48,120; } .acc-orange { --accent:var(--orange); --accent-d:#A2530F; --accent-text:#E39A5E; --accent-rgb:196,104,26; } .acc-red { --accent:var(--red); --accent-d:#A02A2A; --accent-text:#E8706F; --accent-rgb:196,53,53; } .acc-gold { --accent:var(--gold); --accent-d:var(--gold-d); --accent-text:#D4B45E; --accent-rgb:198,156,58; }