/* ==========================================================================
   THEMES — the ONLY file allowed to contain raw colors.
   Palette verified by tools/check-contrast.py (WCAG AA). Re-run after edits.
   Switching: <html data-theme="dark|light" data-accent="crimson|electric|purple|emerald|gold">
   ========================================================================== */

/* Accent swatches for the picker (theme-independent mid tones) */
:root {
  --swatch-crimson: #E23B4E; --swatch-electric: #3B82F6; --swatch-purple: #8B5CF6;
  --swatch-emerald: #22B573; --swatch-gold: #C9A24D;
}

/* ---------- DARK (default) ---------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0D10; --surface-1: #141820; --surface-2: #1A1F29; --surface-3: #222834;
  --border: rgb(255 255 255 / .08); --border-strong: rgb(255 255 255 / .16);
  --text-1: #F1F3F6; --text-2: #A9B1BF; --text-3: #8791A2;
  --overlay: rgb(5 7 10 / .66);
  --glass-bg: rgb(20 24 32 / .72); --glass-border: rgb(255 255 255 / .09);
  --dot: rgb(255 255 255 / .05); --sheen: rgb(255 255 255 / .035);

  --success: #3DD68C; --success-rgb: 61 214 140;
  --warning: #F5B84B; --warning-rgb: 245 184 75;
  --danger:  #FF6B6B; --danger-rgb: 255 107 107; --danger-on: #0B0D10;
  --info:    #5BB3FF; --info-rgb: 91 179 255;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .45);
  --shadow-2: 0 6px 16px rgb(0 0 0 / .38);
  --shadow-3: 0 14px 36px rgb(0 0 0 / .5);
  --shadow-4: 0 28px 72px rgb(0 0 0 / .6);
  --edge: inset 0 1px 0 rgb(255 255 255 / .05);
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4F7; --surface-1: #FFFFFF; --surface-2: #F0F2F6; --surface-3: #E6E9EF;
  --border: rgb(18 21 27 / .10); --border-strong: rgb(18 21 27 / .18);
  --text-1: #12151B; --text-2: #475063; --text-3: #5F687A;
  --overlay: rgb(18 21 27 / .45);
  --glass-bg: rgb(255 255 255 / .78); --glass-border: rgb(18 21 27 / .08);
  --dot: rgb(18 21 27 / .06); --sheen: rgb(255 255 255 / .6);

  --success: #096B41; --success-rgb: 9 107 65;
  --warning: #8A5A00; --warning-rgb: 138 90 0;
  --danger:  #C42B2B; --danger-rgb: 196 43 43; --danger-on: #FFFFFF;
  --info:    #0B63B8; --info-rgb: 11 99 184;

  --shadow-1: 0 1px 2px rgb(18 21 27 / .08);
  --shadow-2: 0 6px 16px rgb(18 21 27 / .10);
  --shadow-3: 0 14px 36px rgb(18 21 27 / .14);
  --shadow-4: 0 28px 72px rgb(18 21 27 / .2);
  --edge: inset 0 1px 0 rgb(255 255 255 / .9);
}

/* ---------- ACCENTS × THEMES ---------- */
:root, :root[data-accent="crimson"] { --accent: #F0636A; --accent-rgb: 240 99 106; --accent-hover: #F57C82; --accent-on: #0B0D10; }
:root[data-theme="light"], :root[data-theme="light"][data-accent="crimson"] { --accent: #C8102E; --accent-rgb: 200 16 46; --accent-hover: #A60D26; --accent-on: #FFFFFF; }

:root[data-accent="electric"] { --accent: #4C8DFF; --accent-rgb: 76 141 255; --accent-hover: #6AA0FF; --accent-on: #0B0D10; }
:root[data-theme="light"][data-accent="electric"] { --accent: #1D5FE0; --accent-rgb: 29 95 224; --accent-hover: #174FC0; --accent-on: #FFFFFF; }

:root[data-accent="purple"] { --accent: #9F7AEA; --accent-rgb: 159 122 234; --accent-hover: #B093F0; --accent-on: #0B0D10; }
:root[data-theme="light"][data-accent="purple"] { --accent: #6D3AD8; --accent-rgb: 109 58 216; --accent-hover: #5A2DB8; --accent-on: #FFFFFF; }

:root[data-accent="emerald"] { --accent: #2FCB7E; --accent-rgb: 47 203 126; --accent-hover: #52DA95; --accent-on: #0B0D10; }
:root[data-theme="light"][data-accent="emerald"] { --accent: #076F49; --accent-rgb: 7 111 73; --accent-hover: #055C3C; --accent-on: #FFFFFF; }

:root[data-accent="gold"] { --accent: #D9B56B; --accent-rgb: 217 181 107; --accent-hover: #E6C887; --accent-on: #0B0D10; }
:root[data-theme="light"][data-accent="gold"] { --accent: #7C5A0C; --accent-rgb: 124 90 12; --accent-hover: #67490A; --accent-on: #FFFFFF; }

/* ---------- Derived tokens (computed from the accent) ---------- */
:root {
  --accent-soft: rgb(var(--accent-rgb) / .14);
  --accent-line: rgb(var(--accent-rgb) / .38);
  --accent-glow: rgb(var(--accent-rgb) / .45);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Elevation levels */
  --elev-0: none;
  --elev-1: var(--edge), var(--shadow-1);
  --elev-2: var(--edge), var(--shadow-2);
  --elev-3: var(--edge), var(--shadow-3);
  --elev-4: var(--edge), var(--shadow-4);
}