/******************************************************************************* * CENTRALISED COLOUR PALETTE * * This is the single source of truth for every colour used across the site. * All other CSS files reference these custom properties instead of hard-coded * values, so the entire website palette can be changed here in one place. * * Variable naming convention: * --color-- * * COLOUR PROFILES * ─────────────── * Three profiles are available. Switch the active profile by setting the * data-theme attribute on : * * (or omit — default) * Varm — amber / terracotta * Kold — Nordic slate-blue * * Only variables that differ from Default are listed in each profile block, * so the blocks stay lean and easy to adjust. * * Use assets/js/theme-switcher.js for a visual in-browser switcher. * *******************************************************************************/ /* ════════════════════════════════════════════════════════════════════════════ * PROFILE: Default (warm cream + teal accent) * ════════════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="default"] { /* ── Primary colours ──────────────────────────────────────────────────── */ --color-black: rgb(0, 0, 0); --color-white: rgb(255, 255, 255); /* ── Background palette ───────────────────────────────────────────────── */ --color-bg-warm: rgb(239, 239, 220); /* warm cream sections */ --color-bg-near-white: rgb(248, 248, 248); /* very light sections */ --color-bg-near-white-2: rgb(244, 244, 244); /* form input background */ --color-bg-silver: rgb(239, 239, 239); /* silver section bg */ --color-bg-pale: rgb(245, 238, 220); /* pale warm background */ --color-bg-dark: rgb(30, 30, 30); /* dark night sections */ --color-bg-mid-dark: rgb(57, 57, 57); /* mid-dark section */ --color-bg-medium-grey: rgb(96, 96, 96); /* medium-grey section */ --color-bg-near-black: rgb(60, 60, 59); /* near-black sections */ /* ── Accent / brand palette ───────────────────────────────────────────── */ --color-accent-teal: rgb(75, 128, 120); /* primary brand accent */ --color-accent-red: rgb(152, 52, 52); /* section accent / alert */ --color-accent-blue: rgb(54, 117, 200); /* action / link blue */ --color-accent-blue-bright: rgb(50, 158, 212); /* bright accent blue */ --color-accent-lime: rgb(175, 200, 81); /* lime accent */ --color-accent-gold: rgb(200, 163, 95); /* warm gold (banners) */ --color-accent-gold-dark: rgb(40, 30, 15); /* dark text on gold */ --color-accent-gold-mid: rgb(90, 75, 45); /* mid-tone text on gold */ --color-accent-gold-text: rgb(55, 45, 25); /* body text on gold */ /* ── Text palette (darkest → lightest) ───────────────────────────────── */ --color-text-near-black: rgb(35, 35, 35); /* near-black text */ --color-text-dark-alt: rgb(42, 42, 42); /* dark-alt text */ --color-text-charcoal: rgb(48, 48, 48); /* charcoal heading text */ --color-text-medium-dark: rgb(83, 83, 83); /* medium-dark text */ --color-text-dark: rgb(89, 89, 89); /* dark body text */ --color-text-body: rgb(104, 104, 104); /* standard body text */ --color-text-medium-grey: rgb(99, 99, 99); /* medium grey (borders) */ --color-text-muted: rgb(131, 131, 131); /* muted / secondary text */ --color-text-lighter: rgb(160, 160, 160); /* lighter / footer text */ --color-text-silver: rgb(165, 165, 165); /* silver text */ --color-text-soft: rgb(184, 184, 184); /* soft light text */ --color-text-pale: rgb(188, 188, 188); /* pale text */ --color-text-light: rgb(200, 200, 200); /* light text on dark */ --color-text-subtle: rgb(207, 207, 207); /* very light text on dark */ --color-text-faint: rgb(235, 235, 235); /* near-white text */ /* ── Border / divider palette ─────────────────────────────────────────── */ --color-border-light: rgb(214, 214, 214); /* subtle light dividers */ --color-border-near-black: rgb(9, 9, 9); /* near-black border */ /* ── Legacy colours (inherited from base / typography) ───────────────── */ --color-legacy-grey: rgb(153, 153, 153); /* #999 tooltip / form */ --color-legacy-dark: rgb(51, 51, 51); /* #333 tooltip title */ --color-legacy-mid: rgb(102, 102, 102); /* #666 submenu bg */ --color-legacy-medium: rgb(85, 85, 85); /* #555 placeholder text */ --color-legacy-blue: rgb(32, 152, 209); /* #2098d1 legacy accent */ /* ── Status colours ───────────────────────────────────────────────────── */ --color-error: rgb(222, 98, 98); /* #de6262 form error bg */ --color-success: rgb(51, 204, 102); /* #33CC66 success button */ /* ── Page-specific accents ────────────────────────────────────────────── */ --color-accent-amber: rgb(239, 180, 62); /* amber highlight */ --color-accent-lavender: rgb(114, 114, 168); /* lavender section bg */ --color-accent-warm-brown: rgb(147, 121, 91); /* warm brown section bg */ --color-bg-warm-grey: rgb(237, 234, 229); /* warm grey background */ --color-text-near-black-2: rgb(18, 18, 18); /* near-black text variant */ --color-text-medium: rgb(106, 106, 106); /* medium grey text */ --color-text-medium-2: rgb(110, 110, 110); /* medium grey text variant */ --color-text-grey-mid: rgb(112, 112, 112); /* mid grey text */ --color-text-mid-grey: rgb(119, 119, 119); /* mid grey text variant */ --color-text-warm-grey: rgb(138, 138, 138); /* warm grey text */ --color-text-mid-light: rgb(147, 147, 147); /* mid-light grey text */ --color-border-mid: rgb(197, 197, 197); /* mid-tone border */ } /* ════════════════════════════════════════════════════════════════════════════ * PROFILE: Varm data-theme="earthy" * Amber-tinged backgrounds, terracotta / rust accents. * Only variables that differ from Default are listed here. * ════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="earthy"] { /* ── Background palette ─────────────────────────────────────────────── */ --color-bg-warm: rgb(245, 233, 205); --color-bg-near-white: rgb(252, 247, 238); --color-bg-near-white-2: rgb(248, 241, 228); --color-bg-silver: rgb(245, 239, 228); --color-bg-pale: rgb(250, 240, 218); --color-bg-dark: rgb(35, 26, 18); --color-bg-near-black: rgb(64, 52, 42); --color-bg-warm-grey: rgb(240, 231, 215); /* ── Accent / brand palette ─────────────────────────────────────────── */ --color-accent-teal: rgb(158, 82, 52); --color-accent-blue: rgb(165, 95, 45); --color-accent-blue-bright: rgb(195, 120, 55); --color-accent-gold: rgb(188, 135, 75); --color-accent-gold-dark: rgb(55, 35, 15); --color-accent-gold-mid: rgb(98, 70, 38); --color-accent-gold-text: rgb(70, 50, 25); --color-accent-amber: rgb(220, 155, 45); --color-accent-warm-brown: rgb(155, 110, 72); } /* ════════════════════════════════════════════════════════════════════════════ * PROFILE: Kold data-theme="cool" * Cool blue-grey backgrounds, Nordic slate-blue accents. * Only variables that differ from Default are listed here. * ════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="cool"] { /* ── Background palette ─────────────────────────────────────────────── */ --color-bg-warm: rgb(225, 232, 242); --color-bg-near-white: rgb(242, 246, 252); --color-bg-near-white-2: rgb(236, 242, 250); --color-bg-silver: rgb(232, 238, 248); --color-bg-pale: rgb(228, 236, 248); --color-bg-dark: rgb(18, 24, 35); --color-bg-near-black: rgb(42, 52, 65); --color-bg-warm-grey: rgb(222, 230, 242); /* ── Accent / brand palette ─────────────────────────────────────────── */ --color-accent-teal: rgb(55, 105, 160); --color-accent-blue: rgb(45, 100, 175); --color-accent-blue-bright: rgb(40, 140, 200); --color-accent-gold: rgb(135, 152, 180); --color-accent-gold-dark: rgb(15, 25, 45); --color-accent-gold-mid: rgb(50, 65, 92); --color-accent-gold-text: rgb(32, 48, 72); --color-accent-amber: rgb(75, 125, 190); --color-accent-warm-brown: rgb(72, 100, 135); }