/* ============================================================ MCC theme tokens. Each theme exposes the same CSS-variable contract so the rest of the stylesheet (mcc.css) is theme-agnostic. Activate a theme by setting `data-theme=""` on . Adding a new theme = adding a new selector block here. Nothing else has to change. Two-layer contract: 1. CANONICAL TOKENS (declared once in :root, identical for every theme so the semantic signal never moves between themes): --ok, --alert, --warn, --info --hue-sage, --hue-amber, --hue-blue, --hue-coral, --hue-violet, --hue-teal The four status colours keep "green = done, red = stop, amber = pending, blue = info" stable everywhere — switching theme must not change what a green pill means. The six --hue-* keep categorical topic/role chips legible. Light themes (e.g. sage-light) re-declare these with darker counterparts so pills stay readable on a light --bg-0. 2. THEME-SPECIFIC TOKENS (declared per html[data-theme=…]): bg-0..3, line, line-strong, ink..ink-4, accent, accent-2, accent-3 Theme character lives here — accent drives buttons, links, nav underline, headings; bg-* sets a seasonal mood. Keep backgrounds close to neutral dark so the UI doesn't feel read through coloured glass; let accent carry the season. ============================================================ */ /* ----- Typesets (selected on ) ----- Each typeset exposes the same four font tokens (ui / mono / serif / headline). mcc.css and templates reference these vars instead of hard-coding "IBM Plex Mono" / "IBM Plex Serif" so a single attribute flip swaps the entire typographic system. Headlines are roman across all three — italic serif was the main readability complaint. */ html[data-typeset="geist"] { --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace; --font-serif: "Newsreader", Georgia, serif; --headline-font: var(--font-serif); --headline-weight: 500; --ui-size: 15px; --ui-leading: 1.55; --code-size: 13px; --tracking-mono: .01em; } html[data-typeset="crisp"] { --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-serif: "Source Serif 4", Georgia, serif; --headline-font: var(--font-serif); --headline-weight: 500; --ui-size: 14.5px; --ui-leading: 1.5; --code-size: 12.5px; --tracking-mono: .015em; } html[data-typeset="plex"] { --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-serif: "IBM Plex Serif", Georgia, serif; --headline-font: var(--font-serif); --headline-weight: 500; --ui-size: 15px; --ui-leading: 1.5; --code-size: 13px; --tracking-mono: .02em; } /* Fallback for any page that forgets the attribute. */ html:not([data-typeset]) { --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-serif: "Newsreader", Georgia, serif; --headline-font: var(--font-serif); --headline-weight: 500; --ui-size: 15px; --ui-leading: 1.55; --code-size: 13px; --tracking-mono: .01em; } /* ----- Canonical status + categorical hues ----- Declared once at :root so every theme inherits the same values. Per-theme blocks below set only the chrome (bg-*, line, ink-*, accent-*). Do NOT redeclare --ok/--alert/--warn/--info inside a theme block — that's what we fixed: switching themes used to move the "responded = green" signal because each theme re-tinted it. Light themes (sage-light) are the one exception; they override these with darker counterparts for contrast on light bg. --ok = EasterTide-style light green: legible on dark bg-0. --alert = warm coral red: same value as --hue-coral so an "alert" pill and a coral-tagged topic chip rhyme. --warn = amber: same value as --hue-amber. --info = blue: already universal across all prior themes. */ :root { --ok: #b4d488; --alert: #e07b5a; --warn: #e4c267; --info: #8ab4f8; --hue-sage: #b9d4a3; --hue-amber: #e4c267; --hue-blue: #8ab4f8; --hue-coral: #e07b5a; --hue-violet: #c5a3d4; --hue-teal: #7fcac0; } /* ----- Neutral structural surfaces (theme-INDEPENDENT) ----- Data tables, structural borders, and neutral (non-semantic) chips read from these instead of the per-theme --bg-* / --line / --ink-*. The point: a strong seasonal theme (Pentecost, Good Friday, Black Friday…) must not tint the table chrome — the season shows through accents, headings, and light tints only. Like the canonical status and hue tokens above, these stay put when the theme flips. So the contract is now three layers: 1. canonical status/hue — fixed signal colours (above) 2. neutral surfaces — fixed grey chrome (here) 3. theme-specific — bg/ink/accent, the seasonal character sage-light re-declares these as light greys (see its block below). */ :root { --surface-1: #0e0e10; /* deepest: inputs, code blocks */ --surface-2: #151517; /* panel / table body */ --surface-3: #1c1c1f; /* header rows, neutral chip bg */ --surface-hi: #26262b; /* raised neutral chip (e.g. the P2 band) */ --surface-line: rgba(182,186,198,0.11); --surface-line-strong: rgba(182,186,198,0.22); --surface-ink: #e7e8ec; /* primary text on a neutral surface */ --surface-ink-2: #aab0bb; --surface-ink-3: #767c87; --surface-ink-4: #4c525c; } /* ---- Default dark theme ---- */ :root, html[data-theme="sage"] { --bg-0: #060908; --bg-1: #090d0b; --bg-2: #0d1311; --bg-3: #131a16; --line: rgba(159,184,146,0.10); --line-strong: rgba(159,184,146,0.24); --ink: #e6ecda; --ink-2: #aab39e; --ink-3: #6c7569; --ink-4: #3d4438; --accent: #b9d4a3; --accent-2: #d8ecc4; --accent-3: #5b7a48; } /* Light counterpart to sage. Same variable contract — every component reads --bg-N / --ink-N / --accent and reverses cleanly. Daytime / printable; not a separate design system. Re-declares the canonical status colours with darker counterparts so pills stay readable on a light --bg-0. */ html[data-theme="sage-light"] { --bg-0: #f4f3ec; --bg-1: #fafaf3; --bg-2: #ffffff; --bg-3: #f1f0e7; --line: rgba(60,84,46,0.16); --line-strong: rgba(60,84,46,0.34); --ink: #1a2218; --ink-2: #4a5544; --ink-3: #7a8475; --ink-4: #b0b8a8; --accent: #4d6b3a; --accent-2: #355224; --accent-3: #b9d4a3; /* Light-theme status overrides (darker than the :root defaults). */ --ok: #4d6b3a; --alert: #b04420; --warn: #8a6a10; --info: #2a5fbf; --hue-sage: #4d6b3a; --hue-amber: #8a6a10; --hue-blue: #2a5fbf; --hue-coral: #b04420; --hue-violet: #6f4a85; --hue-teal: #1f7a76; /* Neutral surfaces — light greys. Legacy tables stay paper-clean and theme-independent in light mode too (see the :root note above). */ --surface-1: #f5f6f7; --surface-2: #ffffff; --surface-3: #f0f1f3; --surface-hi: #e4e6e9; --surface-line: rgba(40,46,58,0.14); --surface-line-strong: rgba(40,46,58,0.26); --surface-ink: #1a1e25; --surface-ink-2: #475063; --surface-ink-3: #6b7280; --surface-ink-4: #9aa1ac; } /* ---- Liturgical seasons ---- */ html[data-theme="advent"] { --bg-0: #0a0810; --bg-1: #0e0c14; --bg-2: #15111c; --bg-3: #1c1726; --line: rgba(170,130,210,0.12); --line-strong: rgba(170,130,210,0.28); --ink: #ece6f5; --ink-2: #b0a4c4; --ink-3: #756988; --ink-4: #3f3650; --accent: #c9a9e8; --accent-2: #e8d3f5; --accent-3: #6b4a8c; } html[data-theme="christmas"] { /* Toned: backgrounds were a saturated green (08100a → 18261b); pulled toward neutral dark so the season reads through accent gold, not through tinted chrome. */ --bg-0: #08100a; --bg-1: #0a130c; --bg-2: #0f1810; --bg-3: #151e16; --line: rgba(220,170,90,0.10); --line-strong: rgba(220,170,90,0.22); --ink: #f5ebd6; --ink-2: #c2b896; --ink-3: #807456; --ink-4: #443d2a; --accent: #e8b850; --accent-2: #f5d488; --accent-3: #876730; } html[data-theme="epiphany"] { --bg-0: #060c14; --bg-1: #0a1018; --bg-2: #101824; --bg-3: #18222e; --line: rgba(140,180,230,0.12); --line-strong: rgba(140,180,230,0.28); --ink: #e8eef8; --ink-2: #a4b6cc; --ink-3: #6a7a90; --ink-4: #364354; --accent: #f5d488; --accent-2: #ffe6b0; --accent-3: #8a6a30; } html[data-theme="lent"] { --bg-0: #08080c; --bg-1: #0c0c10; --bg-2: #131318; --bg-3: #1c1c22; --line: rgba(150,130,180,0.10); --line-strong: rgba(150,130,180,0.22); --ink: #e2dfe8; --ink-2: #a39db0; --ink-3: #6e677e; --ink-4: #3a3548; --accent: #9c84c2; --accent-2: #c0afdc; --accent-3: #4f4068; } html[data-theme="palm"] { --bg-0: #07100a; --bg-1: #0a140e; --bg-2: #101c14; --bg-3: #18261b; --line: rgba(140,200,140,0.13); --line-strong: rgba(140,200,140,0.28); --ink: #e8f0dc; --ink-2: #a8b89a; --ink-3: #6e7d62; --ink-4: #38462e; --accent: #88c47a; --accent-2: #b8e0a8; --accent-3: #426638; } html[data-theme="easter"] { --bg-0: #0a0c08; --bg-1: #0e120c; --bg-2: #161a13; --bg-3: #1f2419; --line: rgba(240,220,160,0.13); --line-strong: rgba(240,220,160,0.30); --ink: #f8f4e4; --ink-2: #c8c1a4; --ink-3: #888066; --ink-4: #443f30; --accent: #f5dc7a; --accent-2: #fff0b0; --accent-3: #8a7a30; } html[data-theme="pentecost"] { /* Toned: backgrounds were a strong warm red-brown (100806 → 2a1a16) and lines were heavy at 0.30 — that's the "looking through orange glasses" feel. Bg pulled close to neutral dark with a faint warm hint; line opacity reduced. Accent (#ed7a4a) untouched so the Pentecost fire still shows on buttons, links, and nav. */ --bg-0: #0a0807; --bg-1: #0d0a09; --bg-2: #13100e; --bg-3: #1a1613; --line: rgba(230,130,90,0.10); --line-strong: rgba(230,130,90,0.22); --ink: #f5e4d8; --ink-2: #c8a89c; --ink-3: #806858; --ink-4: #4a352a; --accent: #ed7a4a; --accent-2: #ffa478; --accent-3: #8a3e1c; } html[data-theme="ordinary"] { --bg-0: #060c08; --bg-1: #08100b; --bg-2: #0d1812; --bg-3: #142119; --line: rgba(120,180,140,0.10); --line-strong: rgba(120,180,140,0.24); --ink: #e0ecdf; --ink-2: #9ab09e; --ink-3: #607566; --ink-4: #344438; --accent: #6fc290; --accent-2: #a6dcb8; --accent-3: #2c6a44; } /* ---- Federal & cultural & notable single-day ---- */ html[data-theme="newyear"] { --bg-0: #050505; --bg-1: #08080a; --bg-2: #101012; --bg-3: #18181c; --line: rgba(220,190,120,0.12); --line-strong: rgba(220,190,120,0.30); --ink: #f4ecd8; --ink-2: #b8ad8e; --ink-3: #786e58; --ink-4: #3c382c; --accent: #e8c87a; --accent-2: #fff0b8; --accent-3: #8a7438; } html[data-theme="mlk"] { --bg-0: #060810; --bg-1: #080c14; --bg-2: #10141e; --bg-3: #181e2a; --line: rgba(180,160,100,0.11); --line-strong: rgba(180,160,100,0.26); --ink: #ece4d0; --ink-2: #a89e84; --ink-3: #6c6450; --ink-4: #38342a; --accent: #d6b56a; --accent-2: #f0d088; --accent-3: #7a6028; } html[data-theme="presidents"] { --bg-0: #06080e; --bg-1: #080a14; --bg-2: #10131e; --bg-3: #181d2a; --line: rgba(150,170,210,0.11); --line-strong: rgba(150,170,210,0.28); --ink: #eaeef8; --ink-2: #a4adc4; --ink-3: #6a7188; --ink-4: #353c50; --accent: #5a82c8; --accent-2: #a8c0ec; --accent-3: #2a4878; } html[data-theme="valentine"] { --bg-0: #100608; --bg-1: #14080b; --bg-2: #1e0f12; --bg-3: #28161a; --line: rgba(230,130,160,0.13); --line-strong: rgba(230,130,160,0.30); --ink: #f4dde2; --ink-2: #c89aa4; --ink-3: #806068; --ink-4: #483038; --accent: #e87a9c; --accent-2: #ffb0c4; --accent-3: #8a3050; } html[data-theme="groundhog"] { --bg-0: #08080a; --bg-1: #0c0c0e; --bg-2: #131316; --bg-3: #1c1c20; --line: rgba(160,150,130,0.10); --line-strong: rgba(160,150,130,0.24); --ink: #e4e0d4; --ink-2: #a89f8a; --ink-3: #6c6555; --ink-4: #3a352c; --accent: #b8a484; --accent-2: #d8c8a8; --accent-3: #6c5c40; } html[data-theme="stpatrick"] { --bg-0: #04100a; --bg-1: #06140c; --bg-2: #0c1d12; --bg-3: #14281a; --line: rgba(120,200,130,0.13); --line-strong: rgba(120,200,130,0.30); --ink: #e4f0d8; --ink-2: #a4b89c; --ink-3: #687864; --ink-4: #344030; --accent: #4cc870; --accent-2: #88e8a0; --accent-3: #1c6a30; } html[data-theme="piday"] { --bg-0: #060c0e; --bg-1: #081012; --bg-2: #10181c; --bg-3: #182228; --line: rgba(120,200,210,0.11); --line-strong: rgba(120,200,210,0.26); --ink: #e4eef0; --ink-2: #9ab0b4; --ink-3: #607075; --ink-4: #30404a; --accent: #5cc8d4; --accent-2: #98e4ec; --accent-3: #28686e; } html[data-theme="aprilfools"] { --bg-0: #08060c; --bg-1: #0c0814; --bg-2: #14101e; --bg-3: #1e1828; --line: rgba(230,140,210,0.12); --line-strong: rgba(230,140,210,0.30); --ink: #f0e0f0; --ink-2: #b89cb4; --ink-3: #786078; --ink-4: #3c303c; --accent: #e85ac8; --accent-2: #ff9ce0; --accent-3: #8a2868; } html[data-theme="taxday"] { --bg-0: #060a08; --bg-1: #080d0a; --bg-2: #0e1612; --bg-3: #161f1a; --line: rgba(140,180,150,0.10); --line-strong: rgba(140,180,150,0.24); --ink: #e0e8de; --ink-2: #9ab09a; --ink-3: #5e7060; --ink-4: #2e3e30; --accent: #6ea876; --accent-2: #a4d0a8; --accent-3: #2c5e30; } html[data-theme="earthday"] { --bg-0: #060c08; --bg-1: #08120a; --bg-2: #101e12; --bg-3: #182a1a; --line: rgba(140,200,140,0.13); --line-strong: rgba(140,200,140,0.30); --ink: #e4f0d8; --ink-2: #a4b898; --ink-3: #687c5e; --ink-4: #344028; --accent: #6ed078; --accent-2: #a8ecaa; --accent-3: #2c6a30; } html[data-theme="cincodemayo"] { --bg-0: #0c0806; --bg-1: #100a08; --bg-2: #18120e; --bg-3: #221a14; --line: rgba(220,140,90,0.12); --line-strong: rgba(220,140,90,0.30); --ink: #f0e4d4; --ink-2: #c4a890; --ink-3: #806858; --ink-4: #44362a; --accent: #d8804c; --accent-2: #f0a878; --accent-3: #883c1c; } html[data-theme="mothersday"] { --bg-0: #0e0a0c; --bg-1: #120c10; --bg-2: #1c1418; --bg-3: #261c20; --line: rgba(220,160,180,0.12); --line-strong: rgba(220,160,180,0.28); --ink: #f0e0e4; --ink-2: #c0a0aa; --ink-3: #786068; --ink-4: #443038; --accent: #e8a4c0; --accent-2: #ffc8d8; --accent-3: #8a4860; } html[data-theme="memorial"] { --bg-0: #050810; --bg-1: #080c14; --bg-2: #10141e; --bg-3: #181e2a; --line: rgba(160,170,200,0.11); --line-strong: rgba(160,170,200,0.28); --ink: #e8ecf4; --ink-2: #a4adbc; --ink-3: #6a7184; --ink-4: #353c4a; --accent: #94a4c4; --accent-2: #cad4e8; --accent-3: #485470; } html[data-theme="flagday"] { --bg-0: #06080e; --bg-1: #080a14; --bg-2: #10131e; --bg-3: #181d2a; --line: rgba(150,170,210,0.12); --line-strong: rgba(150,170,210,0.28); --ink: #eaeef8; --ink-2: #a4adc4; --ink-3: #6a7188; --ink-4: #353c50; --accent: #c83838; --accent-2: #ff7878; --accent-3: #781818; } html[data-theme="fathersday"] { --bg-0: #06080c; --bg-1: #080a10; --bg-2: #10131a; --bg-3: #181d28; --line: rgba(150,170,200,0.10); --line-strong: rgba(150,170,200,0.24); --ink: #e4ecf4; --ink-2: #a4b0c0; --ink-3: #6a7588; --ink-4: #353d4c; --accent: #c89868; --accent-2: #e8b890; --accent-3: #6c4828; } html[data-theme="july4"] { --bg-0: #060810; --bg-1: #080c14; --bg-2: #10141e; --bg-3: #181e2a; --line: rgba(170,180,220,0.12); --line-strong: rgba(170,180,220,0.30); --ink: #f0f4ff; --ink-2: #b0bcd4; --ink-3: #707c98; --ink-4: #38425c; --accent: #d83a3a; --accent-2: #ff7878; --accent-3: #821c1c; } html[data-theme="labor"] { --bg-0: #08090a; --bg-1: #0c0d10; --bg-2: #14161a; --bg-3: #1d2026; --line: rgba(170,170,180,0.10); --line-strong: rgba(170,170,180,0.24); --ink: #e8eaef; --ink-2: #a8aab2; --ink-3: #6c6e78; --ink-4: #383a44; --accent: #e87838; --accent-2: #ffa478; --accent-3: #8a3c10; } html[data-theme="columbus"] { --bg-0: #060a10; --bg-1: #080d14; --bg-2: #10161e; --bg-3: #18202a; --line: rgba(150,180,210,0.11); --line-strong: rgba(150,180,210,0.26); --ink: #e4eef4; --ink-2: #9eb0c0; --ink-3: #647080; --ink-4: #344048; --accent: #d4a458; --accent-2: #f0c888; --accent-3: #785822; } html[data-theme="halloween"] { /* Toned: bg already near-neutral dark; line saturation reduced (0.12 → 0.09 / 0.30 → 0.22) so the orange edges don't shout. Neon accent (#ff7a1a) untouched — Halloween wants that punch. */ --bg-0: #060406; --bg-1: #0a0608; --bg-2: #120c10; --bg-3: #1c1218; --line: rgba(230,130,40,0.09); --line-strong: rgba(230,130,40,0.22); --ink: #f0e0c8; --ink-2: #c0a888; --ink-3: #786850; --ink-4: #44362a; --accent: #ff7a1a; --accent-2: #ffa858; --accent-3: #8a3c08; } html[data-theme="election"] { --bg-0: #07090e; --bg-1: #0a0c14; --bg-2: #11141e; --bg-3: #191e2a; --line: rgba(150,170,200,0.11); --line-strong: rgba(150,170,200,0.28); --ink: #e8ecf4; --ink-2: #a4adbc; --ink-3: #6a7184; --ink-4: #353c4a; --accent: #6890d4; --accent-2: #a8c0e8; --accent-3: #2c4878; } html[data-theme="veterans"] { --bg-0: #080906; --bg-1: #0c0e08; --bg-2: #14180e; --bg-3: #1d2218; --line: rgba(180,180,140,0.10); --line-strong: rgba(180,180,140,0.26); --ink: #ece8d4; --ink-2: #ada89a; --ink-3: #706c5e; --ink-4: #3a3a30; --accent: #c4a868; --accent-2: #e8d098; --accent-3: #786028; } html[data-theme="thanksgiving"] { --bg-0: #0a0806; --bg-1: #0e0a07; --bg-2: #16110b; --bg-3: #211912; --line: rgba(220,150,80,0.13); --line-strong: rgba(220,150,80,0.30); --ink: #f0e0c4; --ink-2: #c4a880; --ink-3: #80664c; --ink-4: #443628; --accent: #d68838; --accent-2: #f0b870; --accent-3: #784818; } html[data-theme="blackfriday"] { /* Toned: line saturation reduced (0.13 → 0.08 / 0.30 → 0.18) and neon accent (#ff6a00) dialed back one notch so the page reads without sunglasses. Still aggressively orange-on-black, just not laser-pointer about it. */ --bg-0: #020202; --bg-1: #050505; --bg-2: #0a0a0a; --bg-3: #131313; --line: rgba(255,140,40,0.08); --line-strong: rgba(255,140,40,0.18); --ink: #f0e8d8; --ink-2: #b0a890; --ink-3: #706850; --ink-4: #38322a; --accent: #e87838; --accent-2: #ffa478; --accent-3: #8a3000; } html[data-theme="cybermonday"] { --bg-0: #020205; --bg-1: #04050a; --bg-2: #0a0c14; --bg-3: #12141e; --line: rgba(80,200,255,0.13); --line-strong: rgba(80,200,255,0.30); --ink: #e0e8f0; --ink-2: #98a4b4; --ink-3: #5e6878; --ink-4: #2e3848; --accent: #38d8ff; --accent-2: #8ce8ff; --accent-3: #18708a; } /* ---- Catholic feast days ---- */ html[data-theme="ashwed"] { --bg-0: #08080a; --bg-1: #0a0a0c; --bg-2: #111114; --bg-3: #1a1a20; --line: rgba(160,150,170,0.10); --line-strong: rgba(160,150,170,0.22); --ink: #d8d4dc; --ink-2: #98949c; --ink-3: #605c68; --ink-4: #322e38; --accent: #8c7aa8; --accent-2: #b09cc8; --accent-3: #443858; } html[data-theme="goodfriday"] { /* Toned: backgrounds were blood-red (050202 → 1a0e0e). Pulled to near-neutral with a faint red whisper; line opacity reduced. Accent stays a somber red so the day still reads as Good Friday, just not through a film of blood. */ --bg-0: #08060a; --bg-1: #0b0808; --bg-2: #120e0e; --bg-3: #1a1414; --line: rgba(180,60,60,0.10); --line-strong: rgba(180,60,60,0.20); --ink: #e0d4d4; --ink-2: #b09090; --ink-3: #705858; --ink-4: #3a2828; --accent: #b03030; --accent-2: #d85858; --accent-3: #6a1818; } html[data-theme="assumption"] { --bg-0: #060812; --bg-1: #080b18; --bg-2: #101524; --bg-3: #182030; --line: rgba(160,180,230,0.12); --line-strong: rgba(160,180,230,0.30); --ink: #ecf0fc; --ink-2: #a4b0d0; --ink-3: #687588; --ink-4: #353e54; --accent: #6890e8; --accent-2: #a8c0f4; --accent-3: #28488a; } html[data-theme="allsaints"] { --bg-0: #0a0a08; --bg-1: #0e0e0a; --bg-2: #16160f; --bg-3: #1f1f17; --line: rgba(240,220,150,0.13); --line-strong: rgba(240,220,150,0.30); --ink: #f8f4dc; --ink-2: #c8c094; --ink-3: #807856; --ink-4: #443f2a; --accent: #f0d870; --accent-2: #fff0a8; --accent-3: #847028; } html[data-theme="immaculate"] { --bg-0: #060810; --bg-1: #080b14; --bg-2: #10141e; --bg-3: #181e2a; --line: rgba(180,200,230,0.13); --line-strong: rgba(180,200,230,0.30); --ink: #f0f4fc; --ink-2: #b0b8cc; --ink-3: #707888; --ink-4: #383e50; --accent: #94b8e0; --accent-2: #d0e0f0; --accent-3: #486890; } html[data-theme="sacredheart"] { /* Toned: bg was strongly red-pink (0a0408 → 21121a). Pulled toward neutral dark with a hint of warmth; line opacity reduced. Accent stays rose so the feast still reads on buttons and headings. */ --bg-0: #0a060a; --bg-1: #0d090c; --bg-2: #140f12; --bg-3: #1c1518; --line: rgba(220,90,110,0.09); --line-strong: rgba(220,90,110,0.22); --ink: #f0d8e0; --ink-2: #c89098; --ink-3: #806068; --ink-4: #44303a; --accent: #d04860; --accent-2: #f08098; --accent-3: #781830; } html[data-theme="corpus"] { --bg-0: #08080a; --bg-1: #0c0c0e; --bg-2: #141416; --bg-3: #1c1c20; --line: rgba(240,220,150,0.13); --line-strong: rgba(240,220,150,0.30); --ink: #f4ecd4; --ink-2: #c0b48c; --ink-3: #807454; --ink-4: #443f28; --accent: #e8c860; --accent-2: #fff0a0; --accent-3: #806028; } /* ============================================================ GLOBAL NEUTRAL CHROME — "accent carries the season", everywhere. The tasks-page change neutralised the legacy (page-default) tables. This block extends the same rule to the v2 component pages (Overview, Approvals, …), which read --bg-* / --line* / --ink-* directly. We pin that whole chrome layer to the theme-independent --surface-* scale, so NO theme tints surfaces, borders, or body text. Each season now shows through ONLY its --accent* trio (declared per-theme above) plus the canonical status/hue chips and the accent-derived light tints (radial glow, hover washes) and headings. Placed after every theme block and at [data-theme] specificity, so it supersedes the per-theme bg/ink/line above without editing each block — those values are kept intact as reference, ready to re-enable a faint seasonal background tint later if we ever want one. --bg-0 is the exception: it is never a surface, it is the contrast colour painted on accent/status fills (button text, solid pills, classification bar), so it must stay near-black on the dark themes and light on sage-light. It is set explicitly, not from --surface-*. */ html[data-theme] { --bg-0: #08080a; --bg-1: var(--surface-1); --bg-2: var(--surface-2); --bg-3: var(--surface-3); --line: var(--surface-line); --line-strong: var(--surface-line-strong); --ink: var(--surface-ink); --ink-2: var(--surface-ink-2); --ink-3: var(--surface-ink-3); --ink-4: var(--surface-ink-4); } /* sage-light only needs --bg-0 flipped back to light here; its --bg-1..3, --line*, and --ink-* already resolve to the light --surface-* values (declared in its own block) through the rule above. */ html[data-theme="sage-light"] { --bg-0: #eceef0; }