/* ============================================================================ BRAND COLOUR VARIANTS (two colours: blue, green) Loaded AFTER style.css. Each [data-variant] overrides design tokens so the whole page re-themes live via the header colour toggle. Dark mode is the default (set on by the early-init script). Each variant supplies a complete LIGHT token set here and a complete DARK token set in the [data-theme="dark"] blocks below, so the header, logo, text and accents all re-theme together with no leftover colour bleeding through. ============================================================================ */ /* ---- Blue: navy #065295 + amber, editorial serif (LIGHT) ---- */ :root[data-variant="blue"] { --navy: #065295; --navy-deep: #043b6c; --amber: #fcb336; --amber-deep: #e09a16; --ink: #111827; --ink-soft: #475569; --surface: #ffffff; --surface-alt: #f5f7fa; --line: #e2e8f0; --heading: var(--navy); --hero-from: var(--navy); --hero-to: var(--navy-deep); --header-bg: rgba(255,255,255,0.92); --header-ink: var(--ink); --logo-ink: var(--navy); --serif: Georgia, "Times New Roman", serif; --radius: 10px; /* CTA button + hero accent word share one soft, on-brand highlight */ --cta-bg: #fcb336; --cta-ink: #111827; --accent-word: #fcb336; } /* ---- Green: emerald #047857 primary, warm gold accent (LIGHT) ---- */ :root[data-variant="green"] { --navy: #047857; --navy-deep: #065f46; --amber: #f59e0b; --amber-deep: #b45309; --ink: #14241d; --ink-soft: #4b5d54; --surface: #ffffff; --surface-alt: #f1f8f4; --line: #d6e9df; --heading: var(--navy); --hero-from: #047857; --hero-to: #065f46; --header-bg: rgba(255,255,255,0.92); --header-ink: var(--ink); --logo-ink: var(--navy); --serif: Georgia, "Times New Roman", serif; --radius: 10px; --cta-bg: #fbbf24; --cta-ink: #14241d; --accent-word: #fcd34d; } /* Hero accent word + CTA button colour, driven by per-variant tokens */ :root[data-variant] .hero .accent { color: var(--accent-word); } :root[data-variant] .btn--accent { background: var(--cta-bg); color: var(--cta-ink); } :root[data-variant] .btn--accent:hover { filter: brightness(0.92); } /* Note: the hero band is dark in both colours, so the WHITE wordmark is correct. The masked header logo uses --logo-ink (brand in light, white in dark). */ /* ============================================================================ DARK MODE per variant (default). Complete token sets so header, logo, text, surfaces and accents all match - no leftover navy bleeding through. ============================================================================ */ :root[data-variant="blue"][data-theme="dark"] { --navy: #2f80d6; --navy-deep: #0a1b2e; --amber: #fcb336; --amber-deep: #f0a921; --ink: #e6edf5; --ink-soft: #9fb2c7; --surface: #0d1620; --surface-alt: #131f2c; --line: #243343; --heading: #cfe1f5; --hero-from: #0a3a66; --hero-to: #061626; --header-bg: rgba(13,22,32,0.92); --header-ink: #e6edf5; --logo-ink: #ffffff; --cta-bg: #fcb336; --cta-ink: #111827; --accent-word: #fcd98a; } :root[data-variant="green"][data-theme="dark"] { --navy: #34d399; --navy-deep: #03130d; --amber: #fbbf24; --amber-deep: #f59e0b; --ink: #e4f6ec; --ink-soft: #93c9ad; --surface: #0a1611; --surface-alt: #0f201a; --line: #1d3b30; --heading: #a7f3d0; --hero-from: #064231; --hero-to: #03130d; --header-bg: rgba(10,22,17,0.92); --header-ink: #e4f6ec; --logo-ink: #ffffff; --cta-bg: #fbbf24; --cta-ink: #04211a; --accent-word: #fcd34d; }