/* ==========================================================================
   Renshu — Theme system
   Three switchable themes, each a complete token set on [data-theme="…"].
   Switch at runtime via app.js (setTheme), persisted in localStorage.
   ========================================================================== */

:root{
  /* shared, theme-independent tokens */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- Theme 1: Blue & White (default) ---------- */
:root,
[data-theme="blue"]{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F7F9FC;
  --ink:#131A2A; --muted:#5B6478; --faint:#8890A2;
  --primary:#1F3A93; --primary-ink:#0F2260; --accent:#B5751F; --accent-bg:#FBEFDD;
  --border:rgba(19,26,42,0.12); --border-strong:rgba(19,26,42,0.24);
  --good:#2E7D5B; --good-bg:#E2F3EA; --bad:#B23A48; --bad-bg:#FBE7E9;
  --shadow: 0 1px 2px rgba(19,26,42,0.06), 0 10px 28px -14px rgba(19,26,42,0.2);
  --t-quant:#1F3A93; --t-quant-bg:#E7EBF7;
  --t-vocab:#7A3E9D; --t-vocab-bg:#F1E6F6;
  --t-logic:#1E7A72; --t-logic-bg:#E1F1EE;
  --t-tech:#A85A16; --t-tech-bg:#F7E6D2;
  --t-civic:#3E7A49; --t-civic-bg:#E4F1E6;
  --t-visual:#A13D6E; --t-visual-bg:#F6E3ED;
  --t-code:#1E5AA8; --t-code-bg:#E3EDF9;
}

/* ---------- Theme 2: Dark Navy ---------- */
[data-theme="navy"]{
  --bg:#0B1020; --surface:#141B30; --surface-2:#1A2340;
  --ink:#EDEFF8; --muted:#9CA6C4; --faint:#6C7699;
  --primary:#7C8DF0; --primary-ink:#C7D0FA; --accent:#F0B860; --accent-bg:#2E2413;
  --border:rgba(237,239,248,0.10); --border-strong:rgba(237,239,248,0.20);
  --good:#5FD498; --good-bg:#0F2A20; --bad:#F17587; --bad-bg:#301019;
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -16px rgba(0,0,0,0.8);
  --t-quant:#7C8DF0; --t-quant-bg:#1D2450;
  --t-vocab:#D79EF0; --t-vocab-bg:#2E1E40;
  --t-logic:#5FE0D0; --t-logic-bg:#0F3230;
  --t-tech:#F0A860; --t-tech-bg:#3A2712;
  --t-civic:#7FE08C; --t-civic-bg:#123320;
  --t-visual:#F095C4; --t-visual-bg:#3A1B2C;
  --t-code:#6FA8F0; --t-code-bg:#122A4A;
}

/* ---------- Theme 3: Warm Amber ---------- */
[data-theme="amber"]{
  --bg:#FBF4E9; --surface:#FFFFFF; --surface-2:#FBF0DE;
  --ink:#2B2013; --muted:#7A6A50; --faint:#A0906F;
  --primary:#B5541F; --primary-ink:#7A3812; --accent:#2E7D5B; --accent-bg:#E2F3EA;
  --border:rgba(43,32,19,0.14); --border-strong:rgba(43,32,19,0.26);
  --good:#2E7D5B; --good-bg:#E2F3EA; --bad:#B23A48; --bad-bg:#FBE3DE;
  --shadow: 0 1px 2px rgba(43,32,19,0.08), 0 10px 28px -14px rgba(43,32,19,0.24);
  --t-quant:#B5541F; --t-quant-bg:#F7E3D2;
  --t-vocab:#8B4A9E; --t-vocab-bg:#F1E3F5;
  --t-logic:#3E7A72; --t-logic-bg:#E1EEEC;
  --t-tech:#96631A; --t-tech-bg:#F1E4C8;
  --t-civic:#4A7A3E; --t-civic-bg:#E6F0E1;
  --t-visual:#8B3D63; --t-visual-bg:#F1E1EA;
  --t-code:#2C6E9E; --t-code-bg:#E1EDF5;
}

/* prefers-color-scheme fallback only when the user hasn't chosen explicitly
   (app.js always stamps data-theme, so this mainly covers first paint) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0B1020; --surface:#141B30; --surface-2:#1A2340;
    --ink:#EDEFF8; --muted:#9CA6C4; --faint:#6C7699;
    --primary:#7C8DF0; --primary-ink:#C7D0FA; --accent:#F0B860; --accent-bg:#2E2413;
    --border:rgba(237,239,248,0.10); --border-strong:rgba(237,239,248,0.20);
    --good:#5FD498; --good-bg:#0F2A20; --bad:#F17587; --bad-bg:#301019;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 14px 34px -16px rgba(0,0,0,0.8);
    --t-quant:#7C8DF0; --t-quant-bg:#1D2450; --t-vocab:#D79EF0; --t-vocab-bg:#2E1E40;
    --t-logic:#5FE0D0; --t-logic-bg:#0F3230; --t-tech:#F0A860; --t-tech-bg:#3A2712;
    --t-civic:#7FE08C; --t-civic-bg:#123320; --t-visual:#F095C4; --t-visual-bg:#3A1B2C;
    --t-code:#6FA8F0; --t-code-bg:#122A4A;
  }
}