/* BourneWise color system. Every theme is exactly FOUR colors (--c1..--c4) plus a legible ink for each (--on1..--on4). Structural surfaces are flat, hard-edged slabs of these. Roles: --c1 main field (chat feed background, poster lead block) --c2 side field (sidebar, secondary blocks, composer fill) --c3 accent (brand actions, highlight pills, send button) --c4 slab (user bubbles, counters, decisive accent stripes) Default theme: Harbour Dusk (deep bases, light text). Switch with data-theme on or any subtree root: "harbour" (daylight) | "earth" | "royal" | "winter" | "white". */ :root { /* Harbour Dusk · deep bases, light text — the default. The original daylight Harbour lives at data-theme="harbour". */ --c1: #2A211B; --on1: #E7DCCB; --c2: #29384F; --on2: #DDE1E6; --c3: #A95D39; --on3: #2E1B10; --c4: #D4C3A9; --on4: #38291D; /* semantic aliases — components reference these, never raw hexes */ --surface-main: var(--c1); --surface-side: var(--c2); --accent: var(--c3); --slab: var(--c4); --text-main: var(--on1); --text-on-side: var(--on2); --text-on-accent: var(--on3); --text-on-slab: var(--on4); /* derived utility inks (use color-mix to stay theme-proof) */ --text-muted: color-mix(in oklab, var(--on1) 64%, var(--c1)); --hairline: color-mix(in oklab, var(--on1) 22%, var(--c1)); --wash: color-mix(in oklab, var(--on1) 6%, var(--c1)); --side-wash: rgba(225, 218, 206, .16); --focus-ring: color-mix(in oklab, var(--c3) 70%, var(--on1)); } [data-theme="harbour"] { /* Harbour · warm daylight (the original) */ --c1: #D7BF96; --on1: #463735; --c2: #4D739F; --on2: #E9E3D9; --c3: #A85836; --on3: #E9E3D9; --c4: #4C3A3A; --on4: #DED2C0; } [data-theme="earth"] { /* Earth & Sky */ --c1: #63362D; --on1: #E9E3D9; --c2: #98634E; --on2: #E9E3D9; --c3: #BD8A64; --on3: #332019; --c4: #AFC1C8; --on4: #1E343D; } [data-theme="royal"] { /* Royal · Blue & Gold */ --c1: #3E518E; --on1: #E9E3D9; --c2: #6075A7; --on2: #1A2547; --c3: #C79B64; --on3: #202944; --c4: #B96F38; --on4: #302315; } [data-theme="winter"] { /* Winter · Roerich */ --c1: #D7D8DF; --on1: #2A2C46; --c2: #505273; --on2: #E9E3D9; --c3: #BF8B65; --on3: #322416; --c4: #7892B0; --on4: #1E2E40; } [data-theme="white"] { /* Muted paper · graphite minimal */ --c1: #DDD8CF; --on1: #1F1F1F; --c2: #262524; --on2: #E9E3D9; --c3: #484A48; --on3: #E9E3D9; --c4: #CAC6BE; --on4: #1F1F1F; }