/* ============================================================
   THEME TOKENS — every theme fills the same contract.
   :root = Rose (default). html[data-theme="..."] overrides.
   ============================================================ */
:root {
  --font: "Georgia", "Times New Roman", serif;
  --bg-gradient: radial-gradient(circle at 30% 20%, #ffe3e9 0%, #ffd0dc 35%, #f6b8cb 70%, #e89bb6 100%);
  --ink: #5a3b41;
  --accent: #c8536a;
  --accent-strong: #b1364a;
  --accent-light: #d35466;
  --on-accent: #ffffff;
  --petal: #e8a0a8;
  --surface: #fff7f2;
  --surface-line: rgba(200, 120, 140, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.6);
  --surface-glass-2: rgba(255, 255, 255, 0.55);
  --border-soft: rgba(217, 165, 102, 0.4);
  --text-muted: #b88;
  --shadow: rgba(140, 40, 70, 0.3);
  --env-from: #ffeede;
  --env-to: #ffd9c2;
  --env-flap: #ffe0cb;
  --env-pocket-a: #ffdac0;
  --env-pocket-b: #ffd2b4;
  --env-glyph: #ffe9d6;
  --ring-stroke: #ffe0cb;
  --error: #d9534f;
}

/* 🩻 Radiology — clinical x-ray film: charcoal + cyan */
html[data-theme="radiology"] {
  --font: "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --bg-gradient: radial-gradient(circle at 30% 20%, #1b2b34 0%, #14222a 45%, #0d1820 75%, #070e13 100%);
  --ink: #e8f6fb;
  --accent: #3fb8c9;
  --accent-strong: #7fd6e3;
  --accent-light: #5ec7d6;
  --on-accent: #06222a;
  --petal: #5ec7d6;
  --surface: #10212b;
  --surface-line: rgba(127, 214, 227, 0.08);
  --surface-glass: rgba(63, 184, 201, 0.12);
  --surface-glass-2: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(127, 214, 227, 0.3);
  --text-muted: #8fb3bd;
  --shadow: rgba(0, 0, 0, 0.5);
  --env-from: #24424f;
  --env-to: #1a3540;
  --env-flap: #2b4e5c;
  --env-pocket-a: #20404c;
  --env-pocket-b: #1a3744;
  --env-glyph: #d6f3f9;
  --ring-stroke: #2b4e5c;
}

/* 🌙 Midnight — the old night palette as a theme */
html[data-theme="midnight"] {
  --font: "Georgia", "Times New Roman", serif;
  --bg-gradient: radial-gradient(circle at 30% 20%, #4a3b6b 0%, #3a2e58 45%, #2a2145 75%, #1c1733 100%);
  --ink: #f3e9f5;
  --accent: #ffb8cb;
  --accent-strong: #ffc2d2;
  --accent-light: #ff9db6;
  --on-accent: #2e2748;
  --petal: #ffc9d6;
  --surface: #2e2748;
  --surface-line: rgba(255, 255, 255, 0.06);
  --surface-glass: rgba(255, 255, 255, 0.1);
  --surface-glass-2: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(217, 165, 102, 0.3);
  --text-muted: #b9a8c8;
  --shadow: rgba(0, 0, 0, 0.4);
  --env-from: #6a5a8e;
  --env-to: #4a3b6b;
  --env-flap: #735f97;
  --env-pocket-a: #5a4a7e;
  --env-pocket-b: #4a3b6b;
  --env-glyph: #ffe9f0;
  --ring-stroke: #735f97;
}

/* 🌊 Ocean — soft blues + teal */
html[data-theme="ocean"] {
  --font: "Georgia", "Times New Roman", serif;
  --bg-gradient: radial-gradient(circle at 30% 20%, #d4f1f7 0%, #aee1ee 38%, #7cc5dd 72%, #4f9fc4 100%);
  --ink: #1f3d49;
  --accent: #2b8fb0;
  --accent-strong: #1f6f8c;
  --accent-light: #3aa6c4;
  --on-accent: #ffffff;
  --petal: #8accd9;
  --surface: #f3fbfd;
  --surface-line: rgba(60, 130, 160, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.6);
  --surface-glass-2: rgba(255, 255, 255, 0.55);
  --border-soft: rgba(90, 170, 200, 0.4);
  --text-muted: #7c9aa6;
  --shadow: rgba(20, 70, 100, 0.28);
  --env-from: #e3f5fb;
  --env-to: #c2e8f2;
  --env-flap: #d3eff6;
  --env-pocket-a: #c8ebf4;
  --env-pocket-b: #b6e0ee;
  --env-glyph: #eafaff;
  --ring-stroke: #d3eff6;
}

/* 🌅 Sunset — peach, coral, gold */
html[data-theme="sunset"] {
  --font: "Georgia", "Times New Roman", serif;
  --bg-gradient: radial-gradient(circle at 30% 20%, #ffe7cf 0%, #ffc9a3 40%, #ff9e7d 73%, #e9748a 100%);
  --ink: #5a3a3f;
  --accent: #e76f51;
  --accent-strong: #d1495b;
  --accent-light: #f4845f;
  --on-accent: #ffffff;
  --petal: #f7b267;
  --surface: #fff6ef;
  --surface-line: rgba(210, 120, 90, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.58);
  --surface-glass-2: rgba(255, 255, 255, 0.5);
  --border-soft: rgba(231, 165, 90, 0.45);
  --text-muted: #b58a7a;
  --shadow: rgba(150, 60, 50, 0.3);
  --env-from: #ffe9d6;
  --env-to: #ffd2b4;
  --env-flap: #ffdcc2;
  --env-pocket-a: #ffd4b8;
  --env-pocket-b: #ffc9a8;
  --env-glyph: #fff1e6;
  --ring-stroke: #ffdcc2;
}

/* ============================================================
   THEME PICKER (top-left) — mirrors the melody panel
   ============================================================ */
.theme-toggle {
  position: fixed;
  top: 16px; left: 16px;
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-glass);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-soft);
  color: var(--accent);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { transform: scale(1.08); }

.theme-panel {
  position: fixed;
  top: 70px; left: 16px;
  z-index: 10;
  width: 200px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 16px 40px var(--shadow);
  padding: 12px;
  transform: translateY(-8px) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.theme-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.theme-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.theme-panel-title {
  font-size: 12px; letter-spacing: 0.5px; color: var(--accent); font-style: italic;
}
.theme-panel-close {
  background: none; border: none; font-size: 14px; color: var(--text-muted);
  cursor: pointer; padding: 2px 4px; line-height: 1;
}
.theme-panel-close:hover { color: var(--accent); }

#themeList { display: flex; flex-direction: column; gap: 6px; }

.theme-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-glass-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.theme-btn:hover { border-color: var(--accent); }
.theme-btn.active { background: var(--accent); border-color: var(--accent); }
.theme-emoji { font-size: 18px; line-height: 1; }
.theme-label { font-size: 14px; color: var(--accent-strong); }
.theme-btn.active .theme-label { color: var(--on-accent); }