/** * Ecosystem theme layer — light/dark. * * Dark is the default (each generator's inline :root already supplies dark colors; * this file just adds a few shared TOKENS used by the literal cleanup). Light is an * override block: `html[data-theme="light"]` has higher specificity than a plain * `:root`, so it recolors every page's inline variables without editing them. * * Set the theme by putting data-theme="light" | "dark" on (done pre-paint by * includes/theme_head.php). Toggle lives in includes/header.php. */ /* New shared tokens — DARK defaults (names not used by any inline :root, so safe). */ :root { --body-bg: radial-gradient(circle at 50% 0%, rgba(110,84,220,.16), transparent 32%), linear-gradient(180deg, #090910 0%, #06060b 100%); --surface-1: rgba(255,255,255,.02); --surface-2: rgba(255,255,255,.04); --surface-3: rgba(255,255,255,.06); --scrim: rgba(7,7,13,.84); --topbar-bg: linear-gradient(180deg, rgba(13,13,22,.95), rgba(7,7,13,.88)); --field-bg: rgba(8,8,14,.55); /* form inputs/selects/textareas */ --title-hi: #ffffff; /* bright stop of clipped heading gradients */ /* Two-tone gradient for clipped page titles (white→gold on dark). */ --title-grad: linear-gradient(135deg, #ffffff 0%, var(--gold-hi) 100%); --busy-veil: rgba(7,7,13,.92); /* full-screen "AI working" overlay veil */ } html { color-scheme: dark; } /* ── LIGHT (warm parchment) ───────────────────────────────────────────────── Overrides the shared semantic variables every page uses. Warm cream page with near-white panels; bronze/green/violet accents tuned for contrast on light. */ html[data-theme="light"] { color-scheme: light; --bg: #efe7d6; --bg-soft: #e7ddc8; --panel: #fffdf7; /* warm near-white panels */ --panel-top: #fbf6ea; --panel-alt: #f3ecdb; --border: #ddd2b9; --border-soft: rgba(0,0,0,.08); --text: #2a2620; /* warm near-black */ --muted: #6b6353; --faint: #9a907c; --gold: #9a7b1f; /* deeper bronze so gold reads on parchment */ --gold-hi: #c79a2e; --violet: #6a4fd6; /* deeper violet for contrast */ --premium: #2f9e6e; /* deeper green */ --premium-light:#3fae7e; --shadow: 0 8px 28px rgba(60,50,25,.12); --body-bg: radial-gradient(circle at 50% 0%, rgba(199,154,46,.12), transparent 40%), linear-gradient(180deg, #f4eedd 0%, #ece2cd 100%); --surface-1: rgba(0,0,0,.02); --surface-2: rgba(0,0,0,.04); --surface-3: rgba(0,0,0,.06); --scrim: rgba(40,34,22,.42); --topbar-bg: linear-gradient(180deg, rgba(255,253,247,.94), rgba(243,236,219,.88)); --field-bg: #ffffff; /* white fields pop on cream panels (with --border) */ --title-hi: #2a2620; /* dark first stop → clipped headings stay readable */ /* Two-tone clipped page titles: near-black → dark bronze (readable on parchment). */ --title-grad: linear-gradient(135deg, var(--text) 0%, var(--gold) 100%); --busy-veil: rgba(244,238,221,.94); /* near-opaque parchment veil */ }