/*-------------------------------------------------------------- # Colour Variables # Dark theme is the default. Light theme activates when # has attribute data-theme="light". --------------------------------------------------------------*/ /* ─── Dark theme (default) ──────────────────────────────── */ :root { /* Global colours */ --background-color: #141414; --default-color: #d9d9d9; --heading-color: #ededed; --accent-color: #594dff; --surface-color: #1c1c1c; --contrast-color: #ffffff; /* Nav menu colours */ --nav-color: #d9d9d9; --nav-hover-color: #594dff; --nav-mobile-background-color: #2e2e2e; --nav-dropdown-background-color: #2e2e2e; --nav-dropdown-color: #d9d9d9; --nav-dropdown-hover-color: #594dff; /* Alternative accent (used for .cn-alt-color variants) */ --accent-color-alt: #ec4899; --accent-color-alt-rgb: 236, 72, 153; --accent-color-alt-hover: #db2777; --accent-color-alt-light: #f9a8d4; } /* ─── Light theme ───────────────────────────────────────── */ [data-theme="light"] { /* Global colours */ --background-color: #ffffff; --default-color: #374151; --heading-color: #111827; --accent-color: #594dff; /* accent stays the same — works on both bgs */ --surface-color: #f9fafb; --contrast-color: #ffffff; /* Nav menu colours */ --nav-color: #374151; --nav-hover-color: #594dff; --nav-mobile-background-color: #f3f4f6; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #374151; --nav-dropdown-hover-color: #594dff; /* Alternative accent stays the same across themes */ --accent-color-alt: #ec4899; --accent-color-alt-rgb: 236, 72, 153; --accent-color-alt-hover: #db2777; --accent-color-alt-light: #f9a8d4; } /* ─── Colour Presets (these override section-by-section) ── */ .light-background { --background-color: rgba(41, 41, 41, 0.8); --surface-color: #484848; } .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #ffffff; }