/* Themes: each one only sets tokens from style.css. Picked in Settings → Appearance.
   "royal" is hidden until unlocked by the easter egg (see site.js). */

[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-sunk: #f2f4f7;
  --surface-hover: #eef0f4;
  --border: #dfe3e8;
  --border-soft: #e9ecf0;
  --text: #15181e;
  --muted: #646b78;
  --accent: #4f46e5;
  --accent-2: #0ea5e9;
  --accent-3: #d97706;
  --accent-4: #8b5cf6;
  --accent-text: #ffffff;
  --input-bg: #ffffff;
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --ok: #16a34a;
  --ok-text: #15803d;
  --backdrop: rgba(20, 24, 32, 0.35);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.18);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #111318;
  --surface: #181b21;
  --surface-strong: #1b1e25;
  --surface-sunk: #14161b;
  --surface-hover: #20242c;
  --border: #2a2e37;
  --border-soft: #22262e;
  --text: #e7e9ee;
  --muted: #9aa1ad;
  --accent: #7c83ff;
  --accent-2: #38bdf8;
  --accent-3: #fbbf24;
  --accent-4: #a78bfa;
  --accent-text: #ffffff;
  --input-bg: #0f1115;
  color-scheme: dark;
}

/* Super dark: true black for OLED screens, borders do the work */
[data-theme="midnight"] {
  --bg: #000000;
  --surface: #0a0a0c;
  --surface-strong: #0d0d10;
  --surface-sunk: #050506;
  --surface-hover: #141418;
  --border: #222228;
  --border-soft: #17171b;
  --text: #f1f1f3;
  --muted: #8b8b95;
  --accent: #8b92ff;
  --accent-2: #3cc3ff;
  --accent-3: #ffc23d;
  --accent-4: #b49cff;
  --accent-text: #000000;
  --input-bg: #000000;
  --backdrop: rgba(0, 0, 0, 0.75);
  --shadow: none;
  --shadow-lg: 0 0 0 1px #222228, 0 24px 60px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* Royal (unlockable): Mary, Queen of Scots — navy, crimson and gold, serif headings */
[data-theme="royal"] {
  --bg: #0b1030;
  --surface: #121a42;
  --surface-strong: #141c47;
  --surface-sunk: #0d1437;
  --surface-hover: #1a2353;
  --border: #2b3670;
  --border-soft: #1e2858;
  --text: #f4ecd8;
  --muted: #b9ae92;
  --accent: #d4af37;
  --accent-2: #e6c66a;
  --accent-3: #f3e3a8;
  --accent-4: #c0394f;
  --accent-text: #24170a;
  --link: #e6c66a;
  --input-bg: #0a0f2c;
  --danger: #e2596d;
  --danger-text: #ffc2cb;
  --backdrop: rgba(5, 8, 25, 0.7);
  --font-head: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  color-scheme: dark;
}
/* A thin Royal Stewart tartan band along the top, and serif touches */
[data-theme="royal"] .topbar {
  border-top: 4px solid transparent;
  border-image: repeating-linear-gradient(90deg, #9e1b32 0 14px, #1d6b3a 14px 18px, #9e1b32 18px 26px, #0f1d5c 26px 30px, #f3e3a8 30px 31px) 1;
}
[data-theme="royal"] .brand span, [data-theme="royal"] .hero h1 { font-family: var(--font-head); font-style: italic; letter-spacing: 0; }
[data-theme="royal"] .eyebrow::before { content: "♛ "; color: var(--accent); }
[data-theme="royal"] .app-icon { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
[data-theme="royal"] .modal-head h2 { font-family: var(--font-head); font-size: 18px; }