/* ── Per-interest hues ───────────────────────────────────────────── Each interest section sets color-scheme="" which selects one of these hue triplets. Everything else (surfaces, text, primary, dots) is derived from --hue / --saturation / --lightness in the shared block below, so adding a new interest only needs three lines here. */ body { --hue: 206; --saturation: 100%; --lightness: 50%; } /* mind & making */ [color-scheme="mdat"] { --hue: 206; --saturation: 100%; --lightness: 50%; } [color-scheme="dev"] { --hue: 238; --saturation: 73%; --lightness: 50%; } /* programming */ [color-scheme="phy"] { --hue: 217; --saturation: 30%; --lightness: 60%; } /* physics */ [color-scheme="sci"] { --hue: 265; --saturation: 45%; --lightness: 52%; } /* science */ [color-scheme="edu"] { --hue: 292; --saturation: 40%; --lightness: 50%; } /* education */ /* land & growing */ [color-scheme="nat"] { --hue: 73; --saturation: 40%; --lightness: 40%; } /* nature */ [color-scheme="env"] { --hue: 45; --saturation: 66%; --lightness: 40%; } /* climate & biodiversity */ [color-scheme="far"] { --hue: 33; --saturation: 45%; --lightness: 42%; } /* farming */ [color-scheme="gar"] { --hue: 95; --saturation: 32%; --lightness: 47%; } /* gardening */ [color-scheme="wood"] { --hue: 22; --saturation: 40%; --lightness: 38%; } /* woodworking */ /* body & food */ [color-scheme="veg"] { --hue: 15; --saturation: 81%; --lightness: 37%; } /* healthy eating */ [color-scheme="move"] { --hue: 168; --saturation: 35%; --lightness: 40%; } /* natural movement */ [color-scheme="run"] { --hue: 350; --saturation: 55%; --lightness: 50%; } /* running */ /* smaller collections */ [color-scheme="book"] { --hue: 340; --saturation: 45%; --lightness: 48%; } /* favourite books */ [color-scheme="link"] { --hue: 195; --saturation: 45%; --lightness: 45%; } /* link list */ [color-scheme="film"] { --hue: 315; --saturation: 38%; --lightness: 48%; } /* favourite movies */ [color-scheme="fly"] { --hue: 185; --saturation: 50%; --lightness: 45%; } /* butterflies seen */ [color-scheme="lat"] { --hue: 217; --saturation: 24%; --lightness: 66%; } /* ── Derived palette (light) ─────────────────────────────────────── Applies to and every element carrying a color-scheme hue. */ body, [color-scheme] { color-scheme: light; /* light */ --primary-light: hsl(var(--hue) var(--saturation) var(--lightness)); --text-1-light: hsl(var(--hue) var(--saturation) 10%); --text-2-light: hsl(var(--hue) 30% 30%); --surface-1-light: hsl(var(--hue) 25% 90%); --surface-2-light: hsl(var(--hue) 20% 99%); --surface-3-light: hsl(var(--hue) 20% 92%); --surface-4-light: hsl(var(--hue) 20% 85%); --surface-shadow-light: var(--hue) 10% calc(var(--lightness) / 5); --shadow-strength-light: .02; /* dark — the accent is lightened (not darkened) so links and interest titles stay readable on the dark surfaces. */ --primary-dark: hsl(var(--hue) var(--saturation) 70%); --text-1-dark: hsl(var(--hue) 15% 85%); --text-2-dark: hsl(var(--hue) 5% 65%); --surface-1-dark: hsl(var(--hue) 10% 10%); --surface-2-dark: hsl(var(--hue) 10% 15%); --surface-3-dark: hsl(var(--hue) 5% 20%); --surface-4-dark: hsl(var(--hue) 5% 25%); --surface-shadow-dark: var(--hue) 50% 3%; --shadow-strength-dark: .8; /* baseline-grid dots — subtle hue-tinted lattice */ --dot-light: hsl(var(--hue) 30% 30% / 0.18); --dot-dark: hsl(var(--hue) 15% 70% / 0.12); /* automatic color scheme (light default) */ --primary: var(--primary-light); --text-1: var(--text-1-light); --text-2: var(--text-2-light); --surface-1: var(--surface-1-light); --surface-2: var(--surface-2-light); --surface-3: var(--surface-3-light); --surface-4: var(--surface-4-light); --surface-shadow: var(--surface-shadow-light); --shadow-strength: var(--shadow-strength-light); --dot: var(--dot-light); --shadow-1: 0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)); --shadow-2: 0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)), 0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)), 0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)), 0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)), 0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)), 0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength)); } @media (prefers-color-scheme: dark) { body, [color-scheme] { color-scheme: dark; --primary: var(--primary-dark); --text-1: var(--text-1-dark); --text-2: var(--text-2-dark); --surface-1: var(--surface-1-dark); --surface-2: var(--surface-2-dark); --surface-3: var(--surface-3-dark); --surface-4: var(--surface-4-dark); --surface-shadow: var(--surface-shadow-dark); --shadow-strength: var(--shadow-strength-dark); --dot: var(--dot-dark); } }