/* ══════════════════════════════════════════════════════════════════════════ @generated by scripts/make_palette.py — DO NOT EDIT BY HAND. Re-run: ../../venv/bin/python scripts/make_palette.py --write This file is data. It holds every colour the site owns and nothing else: no selectors that paint anything, no meaning, no decisions. theme.css turns these into named roles (--primary, --page, --ink …) and is where the reasoning lives; this is the box of paint it reaches into. Each block below is one palette, and one palette is one row of the PALETTES table in the generator — an accent hue, a chroma, and how much of that hue the greys carry. Everything else is derived and then measured; the ratios the design relies on are printed by the script and none of them is asserted by eye. ── The one thing to change ── The palette in force is `data-accent` on . It is written before first paint by the snippet in includes/theme.html, from localStorage, and the appearance panel in theme-fx.js is what writes it there. Both themes come out of the same block, so picking a colour re-tints light and dark at once — there is no second place to keep in step. The default palette is also declared on bare `html:root`, so a page rendered with no attribute, no JavaScript and no stored choice is still fully painted. ── A note on specificity ── `html:root` and `html[data-accent="…"]` are both (0,1,1). They tie, so source order decides, which is why the default comes first and the named palettes after it. Reordering these blocks changes which palette wins. ══════════════════════════════════════════════════════════════════════════ */ /* ── Brown — warm walnut on oatmeal, the default ─────────────────────────────── */ html:root, html[data-accent="brown"] { /* the accent ramp */ --a-50: #fdf8f4; --a-100: #fcf0e5; --a-200: #f8e2cd; --a-300: #f4cca7; --a-300-rgb: 244,204,167; --a-400: #e5af7b; --a-400-rgb: 229,175,123; --a-500: #cb9b6c; --a-500-rgb: 203,155,108; --a-600: #a87f57; --a-600-rgb: 168,127,87; --a-700: #846444; --a-700-rgb: 132,100,68; --a-800: #694f36; --a-900: #56412e; --a-950: #2b1d10; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2829; --l-bad-rgb: 219,40,41; --l-bad-soft-2: #ffd0ca; --l-bad-soft: #ffe2de; --l-bad-strong: #b81e1f; --l-dim: #877e75; --l-dim-rgb: 135,126,117; --l-glow-1: #fbebdc; --l-glow-1-rgb: 251,235,220; --l-glow-2: #fdf2e9; --l-glow-2-rgb: 253,242,233; --l-header-2: #3c2a18; --l-header: #2e1d0b; --l-header-ink: #f5efe9; --l-header-ink-rgb: 245,239,233; --l-header-rgb: 46,29,11; --l-hm-0: #f2eae3; --l-hm-1: #cb9b6c; --l-hm-2: #846444; --l-hm-3: #56412e; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #5c5146; --l-ink-3: #6d6259; --l-ink: #22170c; --l-ink-rgb: 34,23,12; --l-line-2: #d8cbc0; --l-line: #e7ddd4; --l-line-rgb: 231,221,212; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #e5ccb5; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #f2eae3; --l-page: #f8f3ee; --l-primary: #846444; --l-primary-bright: #cb9b6c; --l-primary-ink: #ffffff; --l-primary-lift: #846444; --l-primary-rgb: 132,100,68; --l-primary-sink: #694f36; --l-primary-soft: #fcf0e5; --l-primary-strong: #694f36; --l-primary-wash: #fdf8f4; --l-shade-rgb: 38,23,8; --l-surface-2: #faf6f3; --l-surface-3: #f5efea; --l-surface: #fefcfa; --l-surface-rgb: 254,252,250; --l-warn: #837300; --l-warn-rgb: 131,115,0; --l-warn-soft-2: #f5e58d; --l-warn-soft: #fbf2bd; --l-warn-strong: #675a00; /* dark: the same names against a near-black ground */ --d-bad: #f97267; --d-bad-rgb: 249,114,103; --d-bad-soft-2: #491310; --d-bad-soft: #340c09; --d-bad-strong: #fda69b; --d-dim: #8a8077; --d-dim-rgb: 138,128,119; --d-glow-1: #2e2012; --d-glow-1-rgb: 46,32,18; --d-glow-2: #261b10; --d-glow-2-rgb: 38,27,16; --d-header-2: #281e15; --d-header: #1c130b; --d-header-ink: #f2ebe5; --d-header-ink-rgb: 242,235,229; --d-header-rgb: 28,19,11; --d-hm-0: #372b1f; --d-hm-1: #694f36; --d-hm-2: #a87f57; --d-hm-3: #e5af7b; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #c6bcb3; --d-ink-3: #ada299; --d-ink: #f2ebe5; --d-ink-rgb: 242,235,229; --d-line-2: #5c4a3a; --d-line: #443527; --d-line-rgb: 68,53,39; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #4d3925; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #1f170f; --d-page: #150e08; --d-primary: #a87f57; --d-primary-bright: #e5af7b; --d-primary-ink: #2b1d10; --d-primary-lift: #cb9b6c; --d-primary-rgb: 168,127,87; --d-primary-sink: #a87f57; --d-primary-soft: #332314; --d-primary-strong: #cb9b6c; --d-primary-wash: #24180c; --d-shade-rgb: 1,1,0; --d-surface-2: #372b1f; --d-surface-3: #45372a; --d-surface: #291e15; --d-surface-rgb: 41,30,21; --d-warn: #e3c92d; --d-warn-rgb: 227,201,45; --d-warn-soft-2: #3e3500; --d-warn-soft: #2c2500; --d-warn-strong: #edd659; } /* ── Grey — neutral graphite, the quiet one ─────────────────────────────── */ html[data-accent="grey"] { /* the accent ramp */ --a-50: #f9f9fa; --a-100: #f1f2f4; --a-200: #e4e6e9; --a-300: #d1d5da; --a-300-rgb: 209,213,218; --a-400: #b6bcc3; --a-400-rgb: 182,188,195; --a-500: #a1a6ac; --a-500-rgb: 161,166,172; --a-600: #84898e; --a-600-rgb: 132,137,142; --a-700: #686b70; --a-700-rgb: 104,107,112; --a-800: #525558; --a-900: #444649; --a-950: #1f2122; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2829; --l-bad-rgb: 219,40,41; --l-bad-soft-2: #ffd0ca; --l-bad-soft: #ffe2de; --l-bad-strong: #b81e1f; --l-dim: #7d8084; --l-dim-rgb: 125,128,132; --l-glow-1: #e9eff6; --l-glow-1-rgb: 233,239,246; --l-glow-2: #f1f5fa; --l-glow-2-rgb: 241,245,250; --l-header-2: #282f37; --l-header: #1b222a; --l-header-ink: #eef0f3; --l-header-ink-rgb: 238,240,243; --l-header-rgb: 27,34,42; --l-hm-0: #e9ecef; --l-hm-1: #a1a6ac; --l-hm-2: #686b70; --l-hm-3: #444649; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #4f5359; --l-ink-3: #61656a; --l-ink: #161a1f; --l-ink-rgb: 22,26,31; --l-line-2: #caced4; --l-line: #dbdfe3; --l-line-rgb: 219,223,227; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #cfd1d5; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #e9ecef; --l-page: #f2f4f6; --l-primary: #686b70; --l-primary-bright: #a1a6ac; --l-primary-ink: #ffffff; --l-primary-lift: #686b70; --l-primary-rgb: 104,107,112; --l-primary-sink: #525558; --l-primary-soft: #f1f2f4; --l-primary-strong: #525558; --l-primary-wash: #f9f9fa; --l-shade-rgb: 22,28,35; --l-surface-2: #f6f7f9; --l-surface-3: #eff1f3; --l-surface: #fcfdfe; --l-surface-rgb: 252,253,254; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f97267; --d-bad-rgb: 249,114,103; --d-bad-soft-2: #491310; --d-bad-soft: #340c09; --d-bad-strong: #fda69b; --d-dim: #7f8287; --d-dim-rgb: 127,130,135; --d-glow-1: #1e242a; --d-glow-1-rgb: 30,36,42; --d-glow-2: #1a1e23; --d-glow-2-rgb: 26,30,35; --d-header-2: #1d2025; --d-header: #121519; --d-header-ink: #ebedf0; --d-header-ink-rgb: 235,237,240; --d-header-rgb: 18,21,25; --d-hm-0: #292e33; --d-hm-1: #525558; --d-hm-2: #84898e; --d-hm-3: #b6bcc3; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #babec3; --d-ink-3: #a1a5aa; --d-ink: #ebedf0; --d-ink-rgb: 235,237,240; --d-line-2: #484f57; --d-line: #343940; --d-line-rgb: 52,57,64; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #3b3d40; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #16191d; --d-page: #0e1013; --d-primary: #84898e; --d-primary-bright: #b6bcc3; --d-primary-ink: #1f2122; --d-primary-lift: #a1a6ac; --d-primary-rgb: 132,137,142; --d-primary-sink: #84898e; --d-primary-soft: #252729; --d-primary-strong: #a1a6ac; --d-primary-wash: #1a1b1d; --d-shade-rgb: 0,1,1; --d-surface-2: #292e33; --d-surface-3: #353a41; --d-surface: #1d2126; --d-surface-rgb: 29,33,38; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Green — fresh grass on a pale meadow ─────────────────────────────── */ html[data-accent="green"] { /* the accent ramp */ --a-50: #f3fcf3; --a-100: #e3fae4; --a-200: #c9f4cb; --a-300: #9deba3; --a-300-rgb: 157,235,163; --a-400: #66d873; --a-400-rgb: 102,216,115; --a-500: #59bf65; --a-500-rgb: 89,191,101; --a-600: #469e51; --a-600-rgb: 70,158,81; --a-700: #377c3f; --a-700-rgb: 55,124,63; --a-800: #2c6332; --a-900: #26512b; --a-950: #09280d; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2829; --l-bad-rgb: 219,40,41; --l-bad-soft-2: #ffd0ca; --l-bad-soft: #ffe2de; --l-bad-strong: #b81e1f; --l-dim: #7a827a; --l-dim-rgb: 122,130,122; --l-glow-1: #e4f3e5; --l-glow-1-rgb: 228,243,229; --l-glow-2: #eef8ee; --l-glow-2-rgb: 238,248,238; --l-header-2: #223324; --l-header: #152617; --l-header-ink: #ecf2ed; --l-header-ink-rgb: 236,242,237; --l-header-rgb: 21,38,23; --l-hm-0: #e7eee7; --l-hm-1: #59bf65; --l-hm-2: #377c3f; --l-hm-3: #26512b; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #4c564d; --l-ink-3: #5e685f; --l-ink: #121d13; --l-ink-rgb: 18,29,19; --l-line-2: #c6d2c7; --l-line: #d9e1d9; --l-line-rgb: 217,225,217; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #addcaf; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #e7eee7; --l-page: #f1f5f1; --l-primary: #377c3f; --l-primary-bright: #59bf65; --l-primary-ink: #ffffff; --l-primary-lift: #377c3f; --l-primary-rgb: 55,124,63; --l-primary-sink: #2c6332; --l-primary-soft: #e3fae4; --l-primary-strong: #2c6332; --l-primary-wash: #f3fcf3; --l-shade-rgb: 16,31,18; --l-surface-2: #f5f8f5; --l-surface-3: #edf2ed; --l-surface: #fbfdfc; --l-surface-rgb: 251,253,252; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f97267; --d-bad-rgb: 249,114,103; --d-bad-soft-2: #491310; --d-bad-soft: #340c09; --d-bad-strong: #fda69b; --d-dim: #7b857c; --d-dim-rgb: 123,133,124; --d-glow-1: #19271b; --d-glow-1-rgb: 25,39,27; --d-glow-2: #162117; --d-glow-2-rgb: 22,33,23; --d-header-2: #1a231b; --d-header: #0f1710; --d-header-ink: #e9efe9; --d-header-ink-rgb: 233,239,233; --d-header-rgb: 15,23,16; --d-hm-0: #253127; --d-hm-1: #2c6332; --d-hm-2: #469e51; --d-hm-3: #66d873; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #b7c1b8; --d-ink-3: #9ea89f; --d-ink: #e9efe9; --d-ink-rgb: 233,239,233; --d-line-2: #435344; --d-line: #2f3d30; --d-line-rgb: 47,61,48; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #1d4822; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #131b14; --d-page: #0b120c; --d-primary: #469e51; --d-primary-bright: #66d873; --d-primary-ink: #09280d; --d-primary-lift: #59bf65; --d-primary-rgb: 70,158,81; --d-primary-sink: #469e51; --d-primary-soft: #0c2f11; --d-primary-strong: #59bf65; --d-primary-wash: #07210a; --d-shade-rgb: 0,1,0; --d-surface-2: #253127; --d-surface-3: #313e32; --d-surface: #1a241b; --d-surface-rgb: 26,36,27; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Coral — warm rose on a blush ground ─────────────────────────────── */ html[data-accent="coral"] { /* the accent ramp */ --a-50: #fff7f6; --a-100: #ffeeeb; --a-200: #ffddd7; --a-300: #ffc4ba; --a-300-rgb: 255,196,186; --a-400: #ff9d8d; --a-400-rgb: 255,157,141; --a-500: #ff7561; --a-500-rgb: 255,117,97; --a-600: #d95a49; --a-600-rgb: 217,90,73; --a-700: #ab4639; --a-700-rgb: 171,70,57; --a-800: #88382d; --a-900: #6f3027; --a-950: #3b100b; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #d1277d; --l-bad-rgb: 209,39,125; --l-bad-soft-2: #ffcdde; --l-bad-soft: #ffe0ea; --l-bad-strong: #af1d68; --l-dim: #897c79; --l-dim-rgb: 137,124,121; --l-glow-1: #ffe9e3; --l-glow-1-rgb: 255,233,227; --l-glow-2: #fff1ed; --l-glow-2-rgb: 255,241,237; --l-header-2: #3f2722; --l-header: #311a15; --l-header-ink: #f6eeec; --l-header-ink-rgb: 246,238,236; --l-header-rgb: 49,26,21; --l-hm-0: #f3e9e6; --l-hm-1: #ff7561; --l-hm-2: #ab4639; --l-hm-3: #6f3027; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #5f4f4b; --l-ink-3: #6f615d; --l-ink: #241512; --l-ink-rgb: 36,21,18; --l-line-2: #dbcac5; --l-line: #e8dbd8; --l-line-rgb: 232,219,216; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #ffc4b9; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #f3e9e6; --l-page: #f9f2f0; --l-primary: #ab4639; --l-primary-bright: #ff7561; --l-primary-ink: #ffffff; --l-primary-lift: #ab4639; --l-primary-rgb: 171,70,57; --l-primary-sink: #88382d; --l-primary-soft: #ffeeeb; --l-primary-strong: #88382d; --l-primary-wash: #fff7f6; --l-shade-rgb: 41,21,16; --l-surface-2: #fbf6f4; --l-surface-3: #f6efed; --l-surface: #fffcfb; --l-surface-rgb: 255,252,251; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f070a5; --d-bad-rgb: 240,112,165; --d-bad-soft-2: #461229; --d-bad-soft: #320b1c; --d-bad-strong: #f7a3c2; --d-dim: #8c7e7b; --d-dim-rgb: 140,126,123; --d-glow-1: #311d19; --d-glow-1-rgb: 49,29,25; --d-glow-2: #281915; --d-glow-2-rgb: 40,25,21; --d-header-2: #291d1a; --d-header: #1d120f; --d-header-ink: #f4eae8; --d-header-ink-rgb: 244,234,232; --d-header-rgb: 29,18,15; --d-hm-0: #392925; --d-hm-1: #88382d; --d-hm-2: #d95a49; --d-hm-3: #ff9d8d; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #c8bab7; --d-ink-3: #afa19d; --d-ink: #f4eae8; --d-ink-rgb: 244,234,232; --d-line-2: #5f4842; --d-line: #47332e; --d-line-rgb: 71,51,46; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #682920; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #211613; --d-page: #160d0b; --d-primary: #ff7561; --d-primary-bright: #ffc4ba; --d-primary-ink: #3b100b; --d-primary-lift: #ff9d8d; --d-primary-rgb: 255,117,97; --d-primary-sink: #ff7561; --d-primary-soft: #46140e; --d-primary-strong: #ff9d8d; --d-primary-wash: #330d08; --d-shade-rgb: 2,0,0; --d-surface-2: #392925; --d-surface-3: #483530; --d-surface: #2a1d1a; --d-surface-rgb: 42,29,26; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Plum — deep violet on lilac paper ─────────────────────────────── */ html[data-accent="plum"] { /* the accent ramp */ --a-50: #faf8ff; --a-100: #f5efff; --a-200: #ebe0ff; --a-300: #dec9ff; --a-300-rgb: 222,201,255; --a-400: #caa7ff; --a-400-rgb: 202,167,255; --a-500: #ba87ff; --a-500-rgb: 186,135,255; --a-600: #9b6cd9; --a-600-rgb: 155,108,217; --a-700: #7a55ab; --a-700-rgb: 122,85,171; --a-800: #614387; --a-900: #4f386e; --a-950: #27163b; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2829; --l-bad-rgb: 219,40,41; --l-bad-soft-2: #ffd0ca; --l-bad-soft: #ffe2de; --l-bad-strong: #b81e1f; --l-dim: #817d88; --l-dim-rgb: 129,125,136; --l-glow-1: #f1ebfd; --l-glow-1-rgb: 241,235,253; --l-glow-2: #f6f2fe; --l-glow-2-rgb: 246,242,254; --l-header-2: #322a3e; --l-header: #241d30; --l-header-ink: #f1eff6; --l-header-ink-rgb: 241,239,246; --l-header-rgb: 36,29,48; --l-hm-0: #edeaf2; --l-hm-1: #ba87ff; --l-hm-2: #7a55ab; --l-hm-3: #4f386e; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #55505e; --l-ink-3: #67626e; --l-ink: #1c1723; --l-ink-rgb: 28,23,35; --l-line-2: #d0cbda; --l-line: #e0dce7; --l-line-rgb: 224,220,231; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #ddc9ff; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #edeaf2; --l-page: #f5f3f8; --l-primary: #7a55ab; --l-primary-bright: #ba87ff; --l-primary-ink: #ffffff; --l-primary-lift: #7a55ab; --l-primary-rgb: 122,85,171; --l-primary-sink: #614387; --l-primary-soft: #f5efff; --l-primary-strong: #614387; --l-primary-wash: #faf8ff; --l-shade-rgb: 30,23,40; --l-surface-2: #f8f6fa; --l-surface-3: #f1eff5; --l-surface: #fdfcff; --l-surface-rgb: 253,252,255; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f97267; --d-bad-rgb: 249,114,103; --d-bad-soft-2: #491310; --d-bad-soft: #340c09; --d-bad-strong: #fda69b; --d-dim: #84808b; --d-dim-rgb: 132,128,139; --d-glow-1: #261f30; --d-glow-1-rgb: 38,31,48; --d-glow-2: #1f1b27; --d-glow-2-rgb: 31,27,39; --d-header-2: #221e29; --d-header: #17131d; --d-header-ink: #eeebf3; --d-header-ink-rgb: 238,235,243; --d-header-rgb: 23,19,29; --d-hm-0: #302a38; --d-hm-1: #614387; --d-hm-2: #9b6cd9; --d-hm-3: #caa7ff; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #bfbbc7; --d-ink-3: #a6a2ae; --d-ink: #eeebf3; --d-ink-rgb: 238,235,243; --d-line-2: #514a5e; --d-line: #3b3546; --d-line-rgb: 59,53,70; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #493268; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #1a1720; --d-page: #110e16; --d-primary: #ba87ff; --d-primary-bright: #dec9ff; --d-primary-ink: #27163b; --d-primary-lift: #caa7ff; --d-primary-rgb: 186,135,255; --d-primary-sink: #ba87ff; --d-primary-soft: #2e1b46; --d-primary-strong: #caa7ff; --d-primary-wash: #211233; --d-shade-rgb: 1,1,2; --d-surface-2: #302a38; --d-surface-3: #3d3747; --d-surface: #231e2a; --d-surface-rgb: 35,30,42; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Orchid — magenta, brighter and louder ─────────────────────────────── */ html[data-accent="orchid"] { /* the accent ramp */ --a-50: #fff6fd; --a-100: #ffecfa; --a-200: #ffd9f6; --a-300: #ffbbf1; --a-300-rgb: 255,187,241; --a-400: #ff8aeb; --a-400-rgb: 255,138,235; --a-500: #ea71d6; --a-500-rgb: 234,113,214; --a-600: #c25bb1; --a-600-rgb: 194,91,177; --a-700: #99478b; --a-700-rgb: 153,71,139; --a-800: #79396e; --a-900: #63305a; --a-950: #34112e; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2829; --l-bad-rgb: 219,40,41; --l-bad-soft-2: #ffd0ca; --l-bad-soft: #ffe2de; --l-bad-strong: #b81e1f; --l-dim: #867c84; --l-dim-rgb: 134,124,132; --l-glow-1: #f9e8f6; --l-glow-1-rgb: 249,232,246; --l-glow-2: #fcf1fa; --l-glow-2-rgb: 252,241,250; --l-header-2: #3a2737; --l-header: #2c1a29; --l-header-ink: #f4eef3; --l-header-ink-rgb: 244,238,243; --l-header-rgb: 44,26,41; --l-hm-0: #f1e9ef; --l-hm-1: #ff8aeb; --l-hm-2: #c25bb1; --l-hm-3: #79396e; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #5b4f59; --l-ink-3: #6c616a; --l-ink: #20151f; --l-ink-rgb: 32,21,31; --l-line-2: #d7c9d4; --l-line: #e5dbe3; --l-line-rgb: 229,219,227; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #fbbdee; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #f1e9ef; --l-page: #f7f2f6; --l-primary: #99478b; --l-primary-bright: #ea71d6; --l-primary-ink: #ffffff; --l-primary-lift: #99478b; --l-primary-rgb: 153,71,139; --l-primary-sink: #79396e; --l-primary-soft: #ffecfa; --l-primary-strong: #79396e; --l-primary-wash: #fff6fd; --l-shade-rgb: 36,21,34; --l-surface-2: #faf6f9; --l-surface-3: #f4eef3; --l-surface: #fefcfe; --l-surface-rgb: 254,252,254; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f97267; --d-bad-rgb: 249,114,103; --d-bad-soft-2: #491310; --d-bad-soft: #340c09; --d-bad-strong: #fda69b; --d-dim: #897e87; --d-dim-rgb: 137,126,135; --d-glow-1: #2c1d2a; --d-glow-1-rgb: 44,29,42; --d-glow-2: #251923; --d-glow-2-rgb: 37,25,35; --d-header-2: #261d25; --d-header: #1a1219; --d-header-ink: #f1eaf0; --d-header-ink-rgb: 241,234,240; --d-header-rgb: 26,18,25; --d-hm-0: #352933; --d-hm-1: #79396e; --d-hm-2: #c25bb1; --d-hm-3: #ff8aeb; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #c4bac2; --d-ink-3: #aca1aa; --d-ink: #f1eaf0; --d-ink-rgb: 241,234,240; --d-line-2: #594856; --d-line: #42333f; --d-line-rgb: 66,51,63; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #5d2a54; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #1e161d; --d-page: #140d13; --d-primary: #ea71d6; --d-primary-bright: #ffbbf1; --d-primary-ink: #34112e; --d-primary-lift: #ff8aeb; --d-primary-rgb: 234,113,214; --d-primary-sink: #ea71d6; --d-primary-soft: #3d1537; --d-primary-strong: #ff8aeb; --d-primary-wash: #2c0d27; --d-shade-rgb: 1,0,1; --d-surface-2: #352933; --d-surface-3: #433541; --d-surface: #271d25; --d-surface-rgb: 39,29,37; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Berry — raspberry, warm and saturated ─────────────────────────────── */ html[data-accent="berry"] { /* the accent ramp */ --a-50: #fff6f9; --a-100: #ffedf3; --a-200: #ffdbe8; --a-300: #ffc0d8; --a-300-rgb: 255,192,216; --a-400: #ff94c1; --a-400-rgb: 255,148,193; --a-500: #f670ad; --a-500-rgb: 246,112,173; --a-600: #cd5b8f; --a-600-rgb: 205,91,143; --a-700: #a14770; --a-700-rgb: 161,71,112; --a-800: #803959; --a-900: #683049; --a-950: #371123; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2924; --l-bad-rgb: 219,41,36; --l-bad-soft-2: #ffd0c9; --l-bad-soft: #ffe2de; --l-bad-strong: #b81f1c; --l-dim: #887c80; --l-dim-rgb: 136,124,128; --l-glow-1: #fce8f0; --l-glow-1-rgb: 252,232,240; --l-glow-2: #fef0f5; --l-glow-2-rgb: 254,240,245; --l-header-2: #3d2730; --l-header: #2e1a23; --l-header-ink: #f5eef1; --l-header-ink-rgb: 245,238,241; --l-header-rgb: 46,26,35; --l-hm-0: #f2e8ec; --l-hm-1: #ff94c1; --l-hm-2: #cd5b8f; --l-hm-3: #803959; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #5d4e54; --l-ink-3: #6e6066; --l-ink: #22151b; --l-ink-rgb: 34,21,27; --l-line-2: #d9c9cf; --l-line: #e7dbe0; --l-line-rgb: 231,219,224; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #ffbfd8; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #f2e8ec; --l-page: #f8f2f4; --l-primary: #a14770; --l-primary-bright: #f670ad; --l-primary-ink: #ffffff; --l-primary-lift: #a14770; --l-primary-rgb: 161,71,112; --l-primary-sink: #803959; --l-primary-soft: #ffedf3; --l-primary-strong: #803959; --l-primary-wash: #fff6f9; --l-shade-rgb: 39,21,29; --l-surface-2: #faf6f7; --l-surface-3: #f5eef1; --l-surface: #fefcfd; --l-surface-rgb: 254,252,253; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f97365; --d-bad-rgb: 249,115,101; --d-bad-soft-2: #49130f; --d-bad-soft: #340c09; --d-bad-strong: #fda69a; --d-dim: #8b7e83; --d-dim-rgb: 139,126,131; --d-glow-1: #2e1d25; --d-glow-1-rgb: 46,29,37; --d-glow-2: #26191f; --d-glow-2-rgb: 38,25,31; --d-header-2: #281c21; --d-header: #1c1216; --d-header-ink: #f3eaed; --d-header-ink-rgb: 243,234,237; --d-header-rgb: 28,18,22; --d-hm-0: #37282f; --d-hm-1: #803959; --d-hm-2: #cd5b8f; --d-hm-3: #ff94c1; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #c6babf; --d-ink-3: #aea0a6; --d-ink: #f3eaed; --d-ink-rgb: 243,234,237; --d-line-2: #5c4750; --d-line: #44323a; --d-line-rgb: 68,50,58; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #622943; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #20151a; --d-page: #150d11; --d-primary: #f670ad; --d-primary-bright: #ffc0d8; --d-primary-ink: #371123; --d-primary-lift: #ff94c1; --d-primary-rgb: 246,112,173; --d-primary-sink: #f670ad; --d-primary-soft: #411529; --d-primary-strong: #ff94c1; --d-primary-wash: #2f0d1d; --d-shade-rgb: 1,0,1; --d-surface-2: #37282f; --d-surface-3: #45343b; --d-surface: #291d22; --d-surface-rgb: 41,29,34; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Clay — terracotta on cream ─────────────────────────────── */ html[data-accent="clay"] { /* the accent ramp */ --a-50: #fff7f4; --a-100: #ffefe7; --a-200: #ffdfcf; --a-300: #ffc6aa; --a-300-rgb: 255,198,170; --a-400: #fca272; --a-400-rgb: 252,162,114; --a-500: #e08e64; --a-500-rgb: 224,142,100; --a-600: #ba7450; --a-600-rgb: 186,116,80; --a-700: #925b3e; --a-700-rgb: 146,91,62; --a-800: #744932; --a-900: #5f3c2a; --a-950: #311a0d; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #da2352; --l-bad-rgb: 218,35,82; --l-bad-soft-2: #ffcfd2; --l-bad-soft: #ffe2e3; --l-bad-strong: #b71943; --l-dim: #887d76; --l-dim-rgb: 136,125,118; --l-glow-1: #fdeade; --l-glow-1-rgb: 253,234,222; --l-glow-2: #fef2e9; --l-glow-2-rgb: 254,242,233; --l-header-2: #3e291a; --l-header: #301c0d; --l-header-ink: #f6efea; --l-header-ink-rgb: 246,239,234; --l-header-rgb: 48,28,13; --l-hm-0: #f3eae4; --l-hm-1: #e08e64; --l-hm-2: #925b3e; --l-hm-3: #5f3c2a; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #5d5047; --l-ink-3: #6e625a; --l-ink: #23160d; --l-ink-rgb: 35,22,13; --l-line-2: #dacbc1; --l-line: #e7dcd5; --l-line-rgb: 231,220,213; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #f2c6b1; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #f3eae4; --l-page: #f8f2ef; --l-primary: #925b3e; --l-primary-bright: #e08e64; --l-primary-ink: #ffffff; --l-primary-lift: #925b3e; --l-primary-rgb: 146,91,62; --l-primary-sink: #744932; --l-primary-soft: #ffefe7; --l-primary-strong: #744932; --l-primary-wash: #fff7f4; --l-shade-rgb: 40,22,10; --l-surface-2: #faf6f3; --l-surface-3: #f5efeb; --l-surface: #fffcfb; --l-surface-rgb: 255,252,251; --l-warn: #936a00; --l-warn-rgb: 147,106,0; --l-warn-soft-2: #ffdea3; --l-warn-soft: #ffeed0; --l-warn-strong: #745300; /* dark: the same names against a near-black ground */ --d-bad: #f87082; --d-bad-rgb: 248,112,130; --d-bad-soft-2: #48121b; --d-bad-soft: #340b12; --d-bad-strong: #fca4ab; --d-dim: #8b7f77; --d-dim-rgb: 139,127,119; --d-glow-1: #2f1f13; --d-glow-1-rgb: 47,31,19; --d-glow-2: #271a11; --d-glow-2-rgb: 39,26,17; --d-header-2: #291e16; --d-header: #1c130c; --d-header-ink: #f3ebe6; --d-header-ink-rgb: 243,235,230; --d-header-rgb: 28,19,12; --d-hm-0: #382a21; --d-hm-1: #744932; --d-hm-2: #ba7450; --d-hm-3: #fca272; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #c7bbb3; --d-ink-3: #aea29a; --d-ink: #f3ebe6; --d-ink-rgb: 243,235,230; --d-line-2: #5e493c; --d-line: #453429; --d-line-rgb: 69,52,41; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #583624; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #201610; --d-page: #160e09; --d-primary: #e08e64; --d-primary-bright: #ffc6aa; --d-primary-ink: #311a0d; --d-primary-lift: #fca272; --d-primary-rgb: 224,142,100; --d-primary-sink: #e08e64; --d-primary-soft: #3a1f11; --d-primary-strong: #fca272; --d-primary-wash: #2a150a; --d-shade-rgb: 1,1,0; --d-surface-2: #382a21; --d-surface-3: #46362b; --d-surface: #291e16; --d-surface-rgb: 41,30,22; --d-warn: #fcbc2a; --d-warn-rgb: 252,188,42; --d-warn-soft-2: #473100; --d-warn-soft: #322200; --d-warn-strong: #ffcd6d; } /* ── Ink — near-monochrome, a cool graphite ─────────────────────────────── */ html[data-accent="ink"] { /* the accent ramp */ --a-50: #f9f9fc; --a-100: #f2f1f9; --a-200: #e6e4f3; --a-300: #d4d1eb; --a-300-rgb: 212,209,235; --a-400: #bab6d9; --a-400-rgb: 186,182,217; --a-500: #a5a1c0; --a-500-rgb: 165,161,192; --a-600: #87859f; --a-600-rgb: 135,133,159; --a-700: #6a687d; --a-700-rgb: 106,104,125; --a-800: #545263; --a-900: #454451; --a-950: #201f28; /* light: surfaces, ink, and the accent's roles in them */ --l-bad: #db2829; --l-bad-rgb: 219,40,41; --l-bad-soft-2: #ffd0ca; --l-bad-soft: #ffe2de; --l-bad-strong: #b81e1f; --l-dim: #7f7e87; --l-dim-rgb: 127,126,135; --l-glow-1: #edecfb; --l-glow-1-rgb: 237,236,251; --l-glow-2: #f4f3fd; --l-glow-2-rgb: 244,243,253; --l-header-2: #2e2c3c; --l-header: #211f2e; --l-header-ink: #f0eff5; --l-header-ink-rgb: 240,239,245; --l-header-rgb: 33,31,46; --l-hm-0: #ebebf1; --l-hm-1: #a5a1c0; --l-hm-2: #6a687d; --l-hm-3: #454451; --l-info: #0e7490; --l-info-rgb: 14,116,144; --l-info-soft-2: #a5f3fc; --l-info-soft: #cffafe; --l-info-strong: #155e75; --l-ink-2: #53525c; --l-ink-3: #64636d; --l-ink: #191822; --l-ink-rgb: 25,24,34; --l-line-2: #cdcdd8; --l-line: #dedde6; --l-line-rgb: 222,221,230; --l-link: #1d4ed8; --l-link-strong: #1e40af; --l-meter-track: #d0cfdf; --l-ok: #15803d; --l-ok-rgb: 21,128,61; --l-ok-soft-2: #bbf7d0; --l-ok-soft: #dcfce7; --l-ok-strong: #166534; --l-page-2: #ebebf1; --l-page: #f3f3f8; --l-primary: #6a687d; --l-primary-bright: #a5a1c0; --l-primary-ink: #ffffff; --l-primary-lift: #6a687d; --l-primary-rgb: 106,104,125; --l-primary-sink: #545263; --l-primary-soft: #f2f1f9; --l-primary-strong: #545263; --l-primary-wash: #f9f9fc; --l-shade-rgb: 27,25,38; --l-surface-2: #f7f7fa; --l-surface-3: #f0f0f5; --l-surface: #fdfcfe; --l-surface-rgb: 253,252,254; --l-warn: #a06200; --l-warn-rgb: 160,98,0; --l-warn-soft-2: #ffdcb8; --l-warn-soft: #ffedda; --l-warn-strong: #7f4d00; /* dark: the same names against a near-black ground */ --d-bad: #f97267; --d-bad-rgb: 249,114,103; --d-bad-soft-2: #491310; --d-bad-soft: #340c09; --d-bad-strong: #fda69b; --d-dim: #82818a; --d-dim-rgb: 130,129,138; --d-glow-1: #23212e; --d-glow-1-rgb: 35,33,46; --d-glow-2: #1d1c26; --d-glow-2-rgb: 29,28,38; --d-header-2: #201f27; --d-header: #15141b; --d-header-ink: #ececf2; --d-header-ink-rgb: 236,236,242; --d-header-rgb: 21,20,27; --d-hm-0: #2d2c36; --d-hm-1: #545263; --d-hm-2: #87859f; --d-hm-3: #bab6d9; --d-info: #22d3ee; --d-info-rgb: 34,211,238; --d-info-soft-2: #0f3f4b; --d-info-soft: #0b2f38; --d-info-strong: #67e8f9; --d-ink-2: #bdbcc5; --d-ink-3: #a4a3ad; --d-ink: #ececf2; --d-ink-rgb: 236,236,242; --d-line-2: #4e4c5c; --d-line: #383744; --d-line-rgb: 56,55,68; --d-link: #7aa2ff; --d-link-strong: #a8c3ff; --d-meter-track: #3d3b48; --d-ok: #34d399; --d-ok-rgb: 52,211,153; --d-ok-soft-2: #164a33; --d-ok-soft: #0f3325; --d-ok-strong: #6ee7b7; --d-page-2: #18181f; --d-page: #100f15; --d-primary: #87859f; --d-primary-bright: #bab6d9; --d-primary-ink: #201f28; --d-primary-lift: #a5a1c0; --d-primary-rgb: 135,133,159; --d-primary-sink: #87859f; --d-primary-soft: #272530; --d-primary-strong: #a5a1c0; --d-primary-wash: #1b1a22; --d-shade-rgb: 1,1,1; --d-surface-2: #2d2c36; --d-surface-3: #3a3845; --d-surface: #201f28; --d-surface-rgb: 32,31,40; --d-warn: #ffb867; --d-warn-rgb: 255,184,103; --d-warn-soft-2: #4d2d00; --d-warn-soft: #371f01; --d-warn-strong: #ffca91; } /* ── Swatch previews — the picker's five dots, one per palette, so the picker itself is generated from the same seed as everything else. */ html:root { --sw-brown: #e5af7b; --sw-brown-2: #846444; --sw-grey: #b6bcc3; --sw-grey-2: #686b70; --sw-green: #66d873; --sw-green-2: #377c3f; --sw-coral: #ff9d8d; --sw-coral-2: #ab4639; --sw-plum: #caa7ff; --sw-plum-2: #7a55ab; --sw-orchid: #ff8aeb; --sw-orchid-2: #99478b; --sw-berry: #ff94c1; --sw-berry-2: #a14770; --sw-clay: #fca272; --sw-clay-2: #925b3e; --sw-ink: #bab6d9; --sw-ink-2: #6a687d; }