/* ============================================================
   MKWHAN — Theme definitions
   -----------------------------------------------------------
   Each theme is just a block of CSS variables.
   To add your own theme:
     1. Copy a block below, rename data-theme="mytheme"
     2. Change the colours
     3. Add { id: 'mytheme', label: 'My Theme' } to js/config.js
   The theme switcher in the footer picks it up automatically.
   ============================================================ */

/* — Classic Ivory (default) — */
:root,
[data-theme="ivory"] {
  --bg: #faf7f1;
  --surface: #ffffff;
  --ink: #1d242f;
  --ink-soft: #5c6470;
  --accent: #9c7c4e;
  --accent-ink: #7a5f38;
  --line: #e4ddcd;
  --shadow: 0 6px 30px rgba(29, 36, 47, 0.09);
  --topbar-bg: #1d242f;
  --topbar-ink: #efe9dd;
}

/* — Midnight — */
[data-theme="midnight"] {
  --bg: #0f141b;
  --surface: #161d27;
  --ink: #f0ece3;
  --ink-soft: #9aa3b0;
  --accent: #c9a86a;
  --accent-ink: #d9bc85;
  --line: #2a3342;
  --shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
  --topbar-bg: #c9a86a;
  --topbar-ink: #14191f;
}

/* — Sage — */
[data-theme="sage"] {
  --bg: #f2f3ee;
  --surface: #ffffff;
  --ink: #26301f;
  --ink-soft: #5f6a58;
  --accent: #6d7f5c;
  --accent-ink: #55654a;
  --line: #d9ded2;
  --shadow: 0 6px 30px rgba(38, 48, 31, 0.10);
  --topbar-bg: #26301f;
  --topbar-ink: #eef0e8;
}