/* * ============================================================ * VARIABLES.CSS — Design Tokens * ============================================================ * All brand colours, typography, spacing, and shadow values * live here as CSS custom properties. * * HOW TO CUSTOMISE: * • Swap --gold / --navy for a different brand palette. * • Adjust --radius or --shadow to change the card feel. * • Font families are loaded in index.html . * ============================================================ */ :root { /* ── Core Brand Colours ─────────────────────────────────── */ --navy: #0E2A4A; /* primary dark blue — used for headings, nav, buttons */ --navy-deep: #0A1F38; /* deeper navy — topbar and footer backgrounds */ --gold: #D9A437; /* accent gold — icons, highlights, CTA buttons */ --gold-dark: #B8862A; /* darker gold — hover states, borders, text links */ --teal: #0F4C49; /* academy section colour — a separate brand tone */ --teal-bg: #EEF6F4; /* light teal tint — academy section background */ /* ── Neutral / Background Colours ──────────────────────── */ --bg: #FFFFFF; /* page background */ --bg-grey: #F5F7FA; /* alternating section background */ --ink: #1B2B3D; /* body text — dark but not pure black */ --ink-mid: #52647A; /* secondary / supporting text */ --line: #E2E8F0; /* borders and dividers */ /* ── Shape & Depth ─────────────────────────────────────── */ --radius: 8px; /* card corner radius */ --shadow: 0 4px 24px rgba(14,42,74,.08); /* card drop shadow */ /* ── Typography ────────────────────────────────────────── */ --font-head: "Archivo", sans-serif; /* headings, labels, buttons */ --font-body: "Source Sans 3", sans-serif; /* all body and paragraph text */ /* ── Layout ─────────────────────────────────────────────── */ --max: 1160px; /* maximum content width — change to widen/narrow layout */ }