/* ══════════════════════════════════════════════════════════════════ themes.css — the school-drills colour schemes. The palette is applied by setting data-theme on (themes.js does this before first paint). The bare :root block below is the default and makes this file self-sufficient if JavaScript never runs. TOKEN NAMES ARE HISTORICAL, NOT LITERAL. --navy is "the page background" and --gold is "the accent"; in Blossom the navy is pink and the gold is magenta. Renaming them across five apps was not worth the churn. Adding a theme: copy a block, change the values, add an entry to SD_THEMES in themes.js. Nothing else knows the list. Every block must define EVERY token — a missing one silently inherits from the previous theme and looks like a rendering bug. ══════════════════════════════════════════════════════════════════ */ /* ── Midnight — the original. Deep navy, gold, high focus. ── */ :root, :root[data-theme="midnight"]{ color-scheme:dark; --navy:#0d1525;--navy2:#131d32;--card:#192038;--card2:#1f2944;--border:#253055; --gold:#c09330;--gold-l:#e0b545;--gold-bg:rgba(192,147,48,.12); --text:#d8e4ff;--text2:#7888b0; --ok:#3ecfb0;--ok-bg:rgba(62,207,176,.1);--ok-b:rgba(62,207,176,.3); --err:#f07878;--err-bg:rgba(240,120,120,.1);--err-b:rgba(240,120,120,.3); --knob:#fff;--halo:#eaf4ff;--on-warm:#fff;--on-cool:#08221d; --masc:#7fb0ff;--fem:#f79ad3; --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg); } /* ── Daylight — warm paper and ink. For bright rooms and printing. ── */ :root[data-theme="daylight"]{ color-scheme:light; --navy:#f6f4ef;--navy2:#fffdf9;--card:#ffffff;--card2:#f0ece3;--border:#ded7c9; --gold:#a8761b;--gold-l:#7d5510;--gold-bg:rgba(168,118,27,.13); --text:#1f2a3d;--text2:#6b7488; --ok:#0d7d62;--ok-bg:rgba(13,125,98,.1);--ok-b:rgba(13,125,98,.32); --err:#c0392b;--err-bg:rgba(192,57,43,.09);--err-b:rgba(192,57,43,.3); --knob:#2a3548;--halo:#1f2a3d;--on-warm:#5a1616;--on-cool:#08221d; --masc:#2563c9;--fem:#c02d86; --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg); } /* ── Cobalt — near-black blue with an electric azure accent. ── */ :root[data-theme="cobalt"]{ color-scheme:dark; --navy:#060c18;--navy2:#0c1730;--card:#101d3c;--card2:#16264d;--border:#1f3668; --gold:#2f9bff;--gold-l:#7cc4ff;--gold-bg:rgba(47,155,255,.14); --text:#dcebff;--text2:#7890bd; --ok:#2fd4a8;--ok-bg:rgba(47,212,168,.1);--ok-b:rgba(47,212,168,.3); --err:#ff6b7f;--err-bg:rgba(255,107,127,.1);--err-b:rgba(255,107,127,.3); --knob:#fff;--halo:#e6f2ff;--on-warm:#fff;--on-cool:#04241c; --masc:#7cc4ff;--fem:#ff9ad3; --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg); } /* ── Blossom — soft warm light, rose and plum. ── */ :root[data-theme="blossom"]{ color-scheme:light; --navy:#fdf5f9;--navy2:#fffbfd;--card:#ffffff;--card2:#fbeaf3;--border:#f0d5e4; --gold:#d15a97;--gold-l:#9d2f6b;--gold-bg:rgba(209,90,151,.13); --text:#38222f;--text2:#8a6b7c; --ok:#0d7d62;--ok-bg:rgba(13,125,98,.1);--ok-b:rgba(13,125,98,.3); --err:#c0392b;--err-bg:rgba(192,57,43,.09);--err-b:rgba(192,57,43,.3); --knob:#38222f;--halo:#38222f;--on-warm:#5a1616;--on-cool:#08221d; --masc:#2563c9;--fem:#b32d7d; --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg); } /* ── Carnival — deep grape with loud, happy accents. ── */ :root[data-theme="carnival"]{ color-scheme:dark; --navy:#190e2c;--navy2:#23153e;--card:#2c1a4e;--card2:#37205d;--border:#492c76; --gold:#ff9f1c;--gold-l:#ffd166;--gold-bg:rgba(255,159,28,.16); --text:#f5eaff;--text2:#a98fd0; --ok:#3ddc97;--ok-bg:rgba(61,220,151,.12);--ok-b:rgba(61,220,151,.32); --err:#ff5d8f;--err-bg:rgba(255,93,143,.12);--err-b:rgba(255,93,143,.32); --knob:#fff;--halo:#fff3d6;--on-warm:#fff;--on-cool:#05261a; --masc:#59b0ff;--fem:#ff7ac4; --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg); } /* ── Forest — deep green and lichen. The calm one. ── */ :root[data-theme="forest"]{ color-scheme:dark; --navy:#0b1a13;--navy2:#11241b;--card:#172f23;--card2:#1d3a2b;--border:#2a5040; --gold:#a8c256;--gold-l:#cfe08a;--gold-bg:rgba(168,194,86,.15); --text:#dcecdf;--text2:#7d9c8a; --ok:#4fd18b;--ok-bg:rgba(79,209,139,.11);--ok-b:rgba(79,209,139,.3); --err:#e8836f;--err-bg:rgba(232,131,111,.11);--err-b:rgba(232,131,111,.3); --knob:#fff;--halo:#eaf7ea;--on-warm:#fff;--on-cool:#04241a; --masc:#6fb3d9;--fem:#e59ac0; --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg); } /* ── The picker itself ── */ .sd-theme{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;} .sd-theme select{ font-family:inherit;font-size:11px;color:var(--text); background:var(--card);border:1px solid var(--border);border-radius:7px; padding:4px 6px;cursor:pointer;max-width:140px; } .sd-theme select:hover{border-color:var(--accent);} .sd-theme select:focus-visible{outline:2px solid var(--accent-l);outline-offset:1px;} .sd-theme-i{font-size:13px;line-height:1;}