/* Virtia shared theme tokens — SINGLE SOURCE OF TRUTH, served at /_theme.css and linked by
   every page. The moss light/dark scale + all project palettes (indigo/rose/amber/slate/
   contrast). Mirrors the inline :root block in index.html (2026-07-16 audit: tokens were
   copy-pasted into 9 pages and had drifted — /docs missing --on-fill/--crit, several pages
   missing the light-mode --shadow-card, palettes only in index.html). WCAG-AA verified via
   scripts/verify-palettes.mjs. Any token change goes HERE, not per-page. */
:root{
  --bg:#F4F6F3; --surface:#FBFCFA; --surface-2:#ECEFEA; --border:#D7DFD8;
  --text:#1B2420; --muted:#5C6B62; --faint:#8A978E; --accent:#2F6E5B; --accent-soft:#DCEAE3;
  --ok:#2E7D5B; --warn:#9A6714; --crit:#B23A3A; --info:#2E5E8C;
  --ok-soft:#DEEDE4; --warn-soft:#F1E6CE; --crit-soft:#F2DEDC; --info-soft:#DCE7F1;
  --you:#2E5E8C; --you-soft:#DCE7F1;
  --on-fill:#F7FBF9; /* text/icon on an accent|warn|crit|ok fill — flips per theme so it always contrasts */
  --scrim:rgba(0,0,0,.4); --scrim-img:rgba(8,12,14,.96); --shadow-up:0 -6px 24px rgba(0,0,0,.12); --shadow-pop:0 4px 16px rgba(0,0,0,.32);
  --media-line:rgba(255,255,255,.35); --media-fill:rgba(255,255,255,.25); /* controls layered over an image thumbnail */
  --shadow:0 1px 2px rgba(27,36,32,.06),0 8px 24px rgba(27,36,32,.05);
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Code",monospace; --sans:ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1517;--surface:#151D20;--surface-2:#1B262A;--border:#2A363B;--text:#E6EDE9;--muted:#93A39B;--faint:#6B7A72;
  --accent:#5FB89B;--accent-soft:#1E332C;--ok:#5FB89B;--warn:#D6A43F;--crit:#E0776B;--info:#6FA8D6;
  --ok-soft:#16302A;--warn-soft:#332913;--crit-soft:#331F1C;--info-soft:#152834;--you:#6FA8D6;--you-soft:#152834;
  --on-fill:#0F1517;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);}}
:root[data-theme="dark"]{--bg:#0F1517;--surface:#151D20;--surface-2:#1B262A;--border:#2A363B;--text:#E6EDE9;--muted:#93A39B;--faint:#6B7A72;--accent:#5FB89B;--accent-soft:#1E332C;--ok:#5FB89B;--warn:#D6A43F;--crit:#E0776B;--info:#6FA8D6;--ok-soft:#16302A;--warn-soft:#332913;--crit-soft:#331F1C;--info-soft:#152834;--you:#6FA8D6;--you-soft:#152834;--on-fill:#0F1517}
:root[data-theme="light"]{--bg:#F4F6F3;--surface:#FBFCFA;--surface-2:#ECEFEA;--border:#D7DFD8;--text:#1B2420;--muted:#5C6B62;--faint:#8A978E;--accent:#2F6E5B;--accent-soft:#DCEAE3;--ok:#2E7D5B;--warn:#9A6714;--crit:#B23A3A;--info:#2E5E8C;--ok-soft:#DEEDE4;--warn-soft:#F1E6CE;--crit-soft:#F2DEDC;--info-soft:#DCE7F1;--you:#2E5E8C;--you-soft:#DCE7F1;--on-fill:#F7FBF9}
/* ── Color palettes (theme families) — compose with light/dark. Every palette now
   tints the BACKGROUND + surfaces (not just accent) so each PROJECT feels visually
   distinct (Alan: "each tab must feel distinctive so I never mix them up"). Neutrals
   text/muted/faint inherit the Moss scale. WCAG-AA verified on every load-bearing
   text pair × palette × light/dark (scripts/verify-palettes.mjs). */
:root[data-palette="indigo"][data-theme="light"]{--bg:#F1F2FB;--surface:#FBFBFE;--surface-2:#E7EAF8;--border:#D3D8F0;--accent:#3B4CC0;--accent-soft:#DEE1FA}
:root[data-palette="indigo"][data-theme="dark"]{--bg:#0F1220;--surface:#161A2B;--surface-2:#1E2340;--border:#2E3350;--accent:#9AA9FF;--accent-soft:#20264D}
@media (prefers-color-scheme:light){:root[data-palette="indigo"]:not([data-theme]){--bg:#F1F2FB;--surface:#FBFBFE;--surface-2:#E7EAF8;--border:#D3D8F0;--accent:#3B4CC0;--accent-soft:#DEE1FA}}
@media (prefers-color-scheme:dark){:root[data-palette="indigo"]:not([data-theme]){--bg:#0F1220;--surface:#161A2B;--surface-2:#1E2340;--border:#2E3350;--accent:#9AA9FF;--accent-soft:#20264D}}
:root[data-palette="rose"][data-theme="light"]{--bg:#FBF2F6;--surface:#FEFAFC;--surface-2:#F6E6ED;--border:#EED2DE;--accent:#B0286A;--accent-soft:#FADDE8}
:root[data-palette="rose"][data-theme="dark"]{--bg:#1A1014;--surface:#24171C;--surface-2:#301E26;--border:#442B34;--accent:#F286AC;--accent-soft:#3B1E2B}
@media (prefers-color-scheme:light){:root[data-palette="rose"]:not([data-theme]){--bg:#FBF2F6;--surface:#FEFAFC;--surface-2:#F6E6ED;--border:#EED2DE;--accent:#B0286A;--accent-soft:#FADDE8}}
@media (prefers-color-scheme:dark){:root[data-palette="rose"]:not([data-theme]){--bg:#1A1014;--surface:#24171C;--surface-2:#301E26;--border:#442B34;--accent:#F286AC;--accent-soft:#3B1E2B}}
:root[data-palette="amber"][data-theme="light"]{--bg:#F8F5EC;--surface:#FEFCF7;--surface-2:#F1EBDB;--border:#E3DAC3;--accent:#8A5A0B;--accent-soft:#F6E8C9}
:root[data-palette="amber"][data-theme="dark"]{--bg:#17140C;--surface:#201C12;--surface-2:#2A2418;--border:#3A3223;--accent:#E4B54C;--accent-soft:#332810}
@media (prefers-color-scheme:light){:root[data-palette="amber"]:not([data-theme]){--bg:#F8F5EC;--surface:#FEFCF7;--surface-2:#F1EBDB;--border:#E3DAC3;--accent:#8A5A0B;--accent-soft:#F6E8C9}}
@media (prefers-color-scheme:dark){:root[data-palette="amber"]:not([data-theme]){--bg:#17140C;--surface:#201C12;--surface-2:#2A2418;--border:#3A3223;--accent:#E4B54C;--accent-soft:#332810}}
:root[data-palette="slate"][data-theme="light"]{--bg:#F3F5F7;--surface:#FBFCFD;--surface-2:#EAEEF2;--border:#D3DBE3;--text:#1A2027;--muted:#586570;--faint:#85929E;--accent:#41607D;--accent-soft:#DBE4EE}
:root[data-palette="slate"][data-theme="dark"]{--bg:#0E1417;--surface:#151C22;--surface-2:#1C252C;--border:#2B353E;--text:#E5EBF0;--muted:#93A1AD;--faint:#69747E;--accent:#7FA8CC;--accent-soft:#1C2A36}
@media (prefers-color-scheme:light){:root[data-palette="slate"]:not([data-theme]){--bg:#F3F5F7;--surface:#FBFCFD;--surface-2:#EAEEF2;--border:#D3DBE3;--text:#1A2027;--muted:#586570;--faint:#85929E;--accent:#41607D;--accent-soft:#DBE4EE}}
@media (prefers-color-scheme:dark){:root[data-palette="slate"]:not([data-theme]){--bg:#0E1417;--surface:#151C22;--surface-2:#1C252C;--border:#2B353E;--text:#E5EBF0;--muted:#93A1AD;--faint:#69747E;--accent:#7FA8CC;--accent-soft:#1C2A36}}
:root[data-palette="contrast"][data-theme="light"]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F0F0F0;--border:#5A5A5A;--text:#0A0A0A;--muted:#2E2E2E;--faint:#4A4A4A;--accent:#0A4DB0;--accent-soft:#DCE6F7;--on-fill:#FFFFFF}
:root[data-palette="contrast"][data-theme="dark"]{--bg:#000000;--surface:#000000;--surface-2:#141414;--border:#B0B0B0;--text:#FFFFFF;--muted:#D8D8D8;--faint:#B0B0B0;--accent:#7FB4FF;--accent-soft:#10233F;--on-fill:#000000}
@media (prefers-color-scheme:light){:root[data-palette="contrast"]:not([data-theme]){--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F0F0F0;--border:#5A5A5A;--text:#0A0A0A;--muted:#2E2E2E;--faint:#4A4A4A;--accent:#0A4DB0;--accent-soft:#DCE6F7;--on-fill:#FFFFFF}}
@media (prefers-color-scheme:dark){:root[data-palette="contrast"]:not([data-theme]){--bg:#000000;--surface:#000000;--surface-2:#141414;--border:#B0B0B0;--text:#FFFFFF;--muted:#D8D8D8;--faint:#B0B0B0;--accent:#7FB4FF;--accent-soft:#10233F;--on-fill:#000000}}
/* --shadow-card: the auth/account/feedback card shadow (index.html uses --shadow). Several
   pages defined only the dark value, so light mode fell back to the heavy dark shadow
   (2026-07-16 audit). Both variants defined here so every card page matches. */
:root{--shadow-card:0 10px 40px rgba(27,36,32,.12)}
@media (prefers-color-scheme:dark){:root{--shadow-card:0 10px 40px rgba(0,0,0,.35)}}
:root[data-theme="light"]{--shadow-card:0 10px 40px rgba(27,36,32,.12)}
:root[data-theme="dark"]{--shadow-card:0 10px 40px rgba(0,0,0,.35)}