/* ==========================================================================
   Magnet — themes
   --------------------------------------------------------------------------
   Every colour and typeface in the app comes from the custom properties below.
   base.css never hard-codes a colour, so a new theme is purely additive:

     1. Copy one of the blocks below and give it a new [data-theme="..."] id.
     2. Change the values.
     3. Register it in js/themes.js so it shows up in the theme picker.

   That is the whole contract — no other file needs to change.
   ========================================================================== */

/* ---------------------------------------------------------------- Obsidian
   Cool, dark and quiet. Slate glass, teal accents, violet vs amber stones. */
[data-theme='obsidian'] {
  color-scheme: dark;

  --font-ui: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --bg: #080f13;
  --bg-tint: radial-gradient(1200px 620px at 15% -10%, #12303433 0%, transparent 70%);
  --surface: #0e181e;
  --surface-2: #14232b;
  --surface-3: #1b2f39;
  --border: #1e333d;
  --border-strong: #2c4a58;

  --text: #e6f1f5;
  --text-dim: #9ab0ba;
  --text-faint: #62787f;

  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-ink: #04201d;
  --accent-soft: #2dd4bf1f;
  --danger: #f87171;

  --board-bg: #0c161c;
  --board-border: #213946;
  --board-shadow: 0 24px 60px -30px #000c, 0 0 0 1px #ffffff08 inset;
  --cell-light: #16252d;
  --cell-dark: #101d24;
  --cell-hover: #1d323d;

  --p1: #a78bfa;
  --p1-hi: #ddd6fe;
  --p1-lo: #6d47d9;
  --p2: #fbbf24;
  --p2-hi: #fde68a;
  --p2-lo: #b45309;

  --target-p1: #a78bfa2e;
  --target-p2: #fbbf242e;
  --hint: #2dd4bf80;
  --hint-strong: #2dd4bf;
  --ring-select: #2dd4bf;
  --ring-last: #7f9aa6a8;

  --stone-shadow: 0 3px 0 -1px #0009, 0 6px 14px -6px #000c;
  --shadow-card: 0 1px 0 #ffffff06 inset, 0 18px 40px -32px #000;
  --overlay: #060c0fa8;
  --overlay-strong: #060c0fd9;
}

/* --------------------------------------------------------------- Parchment
   Warm and analogue. Paper, ink and a wooden board. */
[data-theme='parchment'] {
  color-scheme: light;

  --font-ui: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, ui-serif, serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg: #efe4cd;
  --bg-tint: radial-gradient(1100px 600px at 80% -15%, #ffffff9c 0%, transparent 65%);
  --surface: #fbf5e6;
  --surface-2: #f3e9d2;
  --surface-3: #eaddc0;
  --border: #d9c8a4;
  --border-strong: #bfa87c;

  --text: #3a2e21;
  --text-dim: #6d5c46;
  --text-faint: #9a8a70;

  --accent: #9c4a1f;
  --accent-hover: #b85a28;
  --accent-ink: #fdf6e8;
  --accent-soft: #9c4a1f1a;
  --danger: #a32b21;

  --board-bg: #dcc79c;
  --board-border: #b99b68;
  --board-shadow: 0 20px 44px -28px #4b3a2199, 0 0 0 1px #ffffff5c inset;
  --cell-light: #f0e3c6;
  --cell-dark: #ddcaa4;
  --cell-hover: #e8d7b0;

  --p1: #23566b;
  --p1-hi: #58899d;
  --p1-lo: #133544;
  --p2: #9d2f28;
  --p2-hi: #c8635b;
  --p2-lo: #641a15;

  --target-p1: #23566b26;
  --target-p2: #9d2f2826;
  --hint: #9c4a1f8c;
  --hint-strong: #9c4a1f;
  --ring-select: #9c4a1f;
  --ring-last: #8a7455a8;

  --stone-shadow: 0 3px 0 -1px #00000026, 0 6px 12px -6px #00000059;
  --shadow-card: 0 1px 0 #ffffffb3 inset, 0 14px 30px -26px #4b3a21;
  --overlay: #efe4cdab;
  --overlay-strong: #efe4cdd9;
}

/* ------------------------------------------------------------------ Orbit
   A cold, painterly deep — after the drifting-ark mood of Memories in Orbit.
   Bioluminescent cyan and magenta glow out of a teal darkness, lit warm amber. */
[data-theme='orbit'] {
  color-scheme: dark;

  --font-ui: 'Avenir Next', 'Segoe UI', ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --bg: #05131a;
  --bg-tint:
    radial-gradient(900px 520px at 12% -8%, #0e454733 0%, transparent 68%),
    radial-gradient(760px 460px at 88% 8%, #3a1d4a2b 0%, transparent 72%);
  --surface: #0a2029;
  --surface-2: #102e39;
  --surface-3: #17404d;
  --border: #173a45;
  --border-strong: #275c69;

  --text: #dcefee;
  --text-dim: #8fb3b3;
  --text-faint: #587a7d;

  --accent: #f2a65a;
  --accent-hover: #ffc07c;
  --accent-ink: #2a1403;
  --accent-soft: #f2a65a1f;
  --danger: #f2707a;

  --board-bg: #071b23;
  --board-border: #235561;
  --board-shadow: 0 26px 64px -32px #000e, 0 0 0 1px #7fe9dd0f inset;
  --cell-light: #0f2b35;
  --cell-dark: #0a212a;
  --cell-hover: #163c49;

  --p1: #6fdde0;
  --p1-hi: #c6f7f6;
  --p1-lo: #1f7d86;
  --p2: #c96fa8;
  --p2-hi: #f0b6d6;
  --p2-lo: #7a2f5c;

  --target-p1: #6fdde02e;
  --target-p2: #c96fa82e;
  /* warm accents sink into this much darkness — the dots need to stay opaque */
  --hint: #f2a65ad9;
  --hint-strong: #ffc07c;
  --ring-select: #f2a65a;
  --ring-last: #6f96a0a8;

  --stone-shadow: 0 3px 0 -1px #00121799, 0 7px 18px -7px #000d;
  --shadow-card: 0 1px 0 #7fe9dd0a inset, 0 20px 44px -34px #000;
  --overlay: #05131aab;
  --overlay-strong: #05131adb;
}

/* ------------------------------------------------------------------- Rift
   Client-side navy and gilt — after the look of the League of Legends UI.
   Antique gold on midnight blue, with the blue side facing the red side. */
[data-theme='rift'] {
  color-scheme: dark;

  --font-ui: 'Spiegel', 'Segoe UI', ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
  --font-display: 'Beaufort', 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --bg: #010a13;
  --bg-tint:
    radial-gradient(1000px 540px at 50% -12%, #0a284a3d 0%, transparent 70%),
    radial-gradient(680px 420px at 92% 4%, #785a2824 0%, transparent 74%);
  --surface: #0a1428;
  --surface-2: #101f38;
  --surface-3: #1a2c49;
  --border: #253a55;
  --border-strong: #785a28;

  --text: #f0e6d2;
  --text-dim: #a09b8c;
  --text-faint: #6b6a63;

  --accent: #c8aa6e;
  --accent-hover: #e4cd96;
  --accent-ink: #010a13;
  --accent-soft: #c8aa6e1f;
  --danger: #e0655c; /* brighter than the red side, so errors do not read as a player */

  --board-bg: #06101f;
  --board-border: #785a28;
  --board-shadow: 0 26px 64px -34px #000f, 0 0 0 1px #c8aa6e1a inset;
  --cell-light: #0d1c30;
  --cell-dark: #081525;
  --cell-hover: #15294a;

  --p1: #0ac8b9;
  --p1-hi: #8ceee6;
  --p1-lo: #04697f;
  --p2: #c6443e;
  --p2-hi: #ec8f89;
  --p2-lo: #6f1f1c;

  --target-p1: #0ac8b930;
  --target-p2: #c6443e30;
  /* gold at low alpha turns to khaki against the navy — keep the dots bright */
  --hint: #c8aa6ed9;
  --hint-strong: #e4cd96;
  --ring-select: #c8aa6e;
  --ring-last: #6f7f96a8;

  --stone-shadow: 0 3px 0 -1px #00060c99, 0 7px 18px -7px #000e;
  --shadow-card: 0 1px 0 #c8aa6e12 inset, 0 20px 44px -34px #000;
  --overlay: #010a13b0;
  --overlay-strong: #010a13de;
}