/* ================================
   Theme Definitions (Global)
   ================================ */

/* ---------- Base defaults ---------- */
:root {
  --bg: white;
  /* --bg: #0b1020; */
  /* --card: #111a33; */
  /* --text: #e9eefc; */
  /* --muted: #a9b4d0; */
  /* --accent: #59d3ff; */
  --border: rgba(255, 255, 255, 0.08);
  --surface: rgba(255, 255, 255, 0.04);
}

/* =========================================================
   Dark / Neutral themes
   ========================================================= */

:root[data-theme="default"] {
  --bg: #0b1020;
  --card: #111a33;
  --text: #e9eefc;
  --muted: #a9b4d0;
  --accent: #59d3ff;
}

:root[data-theme="contrast"] {
  --bg: #000000;
  --card: #141414;
  --text: #ffffff;
  --muted: #c7c7c7;
  --accent: #ff3d00;
}

:root[data-theme="coffee"] {
  --bg: #1a1410;
  --card: #2a211b;
  --text: #fff3e8;
  --muted: #c8b4a4;
  --accent: #ffb703;
}

:root[data-theme="ice"] {
  --bg: #061018;
  --card: #0b2230;
  --text: #e9fbff;
  --muted: #92b8c5;
  --accent: #22d3ee;
}

:root[data-theme="neon"] {
  --bg: #0b0716;
  --card: #1a1030;
  --text: #f5f0ff;
  --muted: #c0b3ea;
  --accent: #a78bfa;
}

:root[data-theme="tactical"] {
  --bg: #0f1410;
  --card: #1b241b;
  --text: #eef7ea;
  --muted: #a6b7a0;
  --accent: #84cc16;
}

:root[data-theme="paper"] {
  --bg: #fbfbf7;
  --card: #ffffff;
  --text: #0b1020;
  --muted: #5b677a;
  --accent: #0ea5e9;
  --border: rgba(0, 0, 0, 0.12);
  --surface: rgba(0, 0, 0, 0.04);
}

:root[data-theme="pop"] {
  --bg: #fff7ed;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #f97316;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

:root[data-theme="sky"] {
  --bg: #f0f9ff;
  --card: #ffffff;
  --text: #0c4a6e;
  --muted: #64748b;
  --accent: #0ea5e9;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

:root[data-theme="candy"] {
  --bg: #fdf2f8;
  --card: #ffffff;
  --text: #3b0a2a;
  --muted: #9d5b7a;
  --accent: #ec4899;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

:root[data-theme="lime"] {
  --bg: #f7fee7;
  --card: #ffffff;
  --text: #1a2e05;
  --muted: #4d7c0f;
  --accent: #84cc16;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

/* =========================================================
   Theme Preview (scoped, for settings UI)
   ========================================================= */


.theme-preview[data-theme="default"] {
  --bg: #0b1020;
  --card: #111a33;
  --text: #e9eefc;
  --muted: #a9b4d0;
  --accent: #59d3ff;
}

.theme-preview[data-theme="contrast"] {
  --bg: #000000;
  --card: #141414;
  --text: #ffffff;
  --muted: #c7c7c7;
  --accent: #ff3d00;
}

.theme-preview[data-theme="coffee"] {
  --bg: #1a1410;
  --card: #2a211b;
  --text: #fff3e8;
  --muted: #c8b4a4;
  --accent: #ffb703;
}

.theme-preview[data-theme="ice"] {
  --bg: #061018;
  --card: #0b2230;
  --text: #e9fbff;
  --muted: #92b8c5;
  --accent: #22d3ee;
}

.theme-preview[data-theme="neon"] {
  --bg: #0b0716;
  --card: #1a1030;
  --text: #f5f0ff;
  --muted: #c0b3ea;
  --accent: #a78bfa;
}

.theme-preview[data-theme="tactical"] {
  --bg: #0f1410;
  --card: #1b241b;
  --text: #eef7ea;
  --muted: #a6b7a0;
  --accent: #84cc16;
}

.theme-preview[data-theme="paper"] {
  --bg: #fbfbf7;
  --card: #ffffff;
  --text: #0b1020;
  --muted: #5b677a;
  --accent: #0ea5e9;
  --border: rgba(0, 0, 0, 0.12);
  --surface: rgba(0, 0, 0, 0.04);
}

.theme-preview[data-theme="pop"] {
  --bg: #fff7ed;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #f97316;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

.theme-preview[data-theme="sky"] {
  --bg: #f0f9ff;
  --card: #ffffff;
  --text: #0c4a6e;
  --muted: #64748b;
  --accent: #0ea5e9;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

.theme-preview[data-theme="candy"] {
  --bg: #fdf2f8;
  --card: #ffffff;
  --text: #3b0a2a;
  --muted: #9d5b7a;
  --accent: #ec4899;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

.theme-preview[data-theme="lime"] {
  --bg: #f7fee7;
  --card: #ffffff;
  --text: #1a2e05;
  --muted: #4d7c0f;
  --accent: #84cc16;
  --border: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.04);
}

.theme-preview[data-theme] {
  width: 150px;
  cursor: pointer;
}

.theme-preview .demo.bg {
  background-color: var(--bg);
}

.theme-preview .demo.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.theme-preview .demo.card.active {
  outline: 2px solid var(--accent);
}


.theme-preview .demo.text {
  color: var(--text);
}

.theme-preview .demo.muted {
  color: var(--muted);
}

.theme-preview .demo.accent {
  color: var(--accent);
}