/* ========================================================================== BRAND TOKENS — Gahoose Technologies The single source of truth for colour, type, and spacing. Change a value here and it changes everywhere, on both sites. ========================================================================== */ :root{ /* --------------------------------------------------------------- LIGHT ENVIRONMENT — default Marketing pages, print, anything a stranger sees first. --------------------------------------------------------------- */ --bg:#ffffff; /* page ground */ --bg-2:#f5f6f8; /* raised panels, bands */ --bg-3:#eceff3; /* table heads, inset fields */ --line:#dfe3e9; /* borders */ --line-soft:#eaedf1; /* internal dividers */ --tx:#12181f; /* headings 15.8:1 */ --tx-2:#3d4753; /* body copy 9.1:1 */ --tx-3:#6b7684; /* secondary, captions 4.9:1 */ --accent:#1f6fb8; /* PRIMARY — interactive 5.2:1 */ --accent-soft:#eaf2fa; /* accent tint backgrounds */ --gold:#8a6520; /* SECONDARY — credential 5.3:1 */ --gold-soft:#f8f3e8; /* gold tint backgrounds */ --btn-tx:#ffffff; /* text on a filled accent button */ --shadow-sm:0 1px 2px rgba(18,24,31,.05); --shadow:0 1px 2px rgba(18,24,31,.05), 0 8px 24px rgba(18,24,31,.06); /* --------------------------------------------------------------- TYPE --------------------------------------------------------------- */ --font-display:'Space Grotesk', system-ui, sans-serif; --font-body:'Inter', system-ui, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; --font-prose:'Spectral', Georgia, serif; /* long-form reading */ --font-serif-display:'Cormorant Garamond', Georgia, serif; --font-condensed:'Barlow Condensed', system-ui, sans-serif; --track-tight:-0.033em; /* large display */ --track-snug:-0.025em; /* headings */ --track-wide:0.04em; /* small caps labels */ --track-mono:0.13em; /* mono uppercase */ /* --------------------------------------------------------------- SPACE & SHAPE --------------------------------------------------------------- */ --r:10px; /* standard corner */ --r-lg:14px; /* large panels */ --r-pill:20px; --gut:32px; /* page gutter, desktop */ --gut-sm:20px; /* page gutter, mobile */ --measure:64ch; /* max line length for body copy */ --shell:1080px; /* max content width */ --shell-narrow:720px; /* max width for long-form reading */ } /* ========================================================================== DARK ENVIRONMENT Apply .dark to for a fully dark page, or .darkband to any section for a permanently dark strip (this is how the header and footer stay dark on light pages). ========================================================================== */ body.dark, .darkband{ --bg:#0e131a; --bg-2:#151c25; --bg-3:#1b2430; --line:#232e3b; --line-soft:#1c2530; --tx:#eef1f5; /* 14.9:1 */ --tx-2:#b9c3d0; /* 10.5:1 */ --tx-3:#8b96a5; /* 5.6:1 */ --accent:#4d9be6; /* 6.2:1 */ --accent-soft:rgba(77,155,230,.11); --gold:#d8b26b; /* 9.2:1 */ --gold-soft:rgba(216,178,107,.10); --btn-tx:#0b1016; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); } .darkband{ background:var(--bg); color:var(--tx-2); } /* Deepest ground, used outside the content shell */ body.dark{ background:#080b10; } /* ========================================================================== NOTES ON USE -------------------------------------------------------------------------- • --accent is the ONLY colour for interactive elements. Buttons, links, active nav, focus rings, active filters. Never gold. • --gold is for credentials and emphasis. Certifications, key figures, the logo bill, "what we'd change" callouts. Never a button. • Neither carries system status. If you build a dashboard, define a separate status set so "clickable" and "healthy" never share a colour. • The light values are NOT the dark values dimmed. #1f6fb8 and #4d9be6 are different hexes because both must clear 4.5:1 on their own ground. Never use the dark accent on a light background — it fails at 3.0:1. ========================================================================== */