/* shared-tokens.css — the design tokens every card reads. * * Loaded by city-template.php and by any page that hosts a card component * (calltime-planner-card.php, notes-card.php…). Without it, card CSS still parses * but every var(--…) falls back to nothing and the cards render unstyled. * * ⚠ SOURCE ORDER MATTERS HERE. :root and [data-theme="light"] have IDENTICAL * specificity (0,1,0) and both match , so the light block only wins because * it comes second. Never reorder these two blocks, and never split them into * separate files that could load in either order. * * ⚠ --bg IS NOT THE LIGHT PAGE BACKGROUND. In light theme --bg is #eeeef8, but * city-template.php overrides the page itself to #FFFFFF (see [data-theme="light"] * body — background-color:#FFFFFF under a sky image). Dark has no such override, * so there --bg #07070e really is the page colour. Anything that needs to match * the real page background — a theme bootstrap script, a full-screen overlay — * must use #FFFFFF / #07070e, not var(--bg). Getting this wrong swaps one wrong * flash of colour for another. */ :root { --bg: #07070e; --surface: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.08); --accent: #818cf8; --accent2: #a5b4fc; --green: #34d399; --text: #f1f0f9; --mid: rgba(241,240,249,0.78); --dim: rgba(241,240,249,0.62); color-scheme: dark; } [data-theme="light"] { --bg: #eeeef8; --surface: rgba(0,0,0,0.035); --border: rgba(0,0,0,0.09); --accent: #5b5fe8; --accent2: #7179f5; --green: #059669; --text: #181827; --mid: rgba(24,24,39,0.88); --dim: rgba(24,24,39,0.78); color-scheme: light; }