/* ========================================
   Mindful Zen — 5 themes (matches app)
   Default = Deep Navy. Apply via body class:
   .theme-deep-navy / .theme-forest / .theme-sunset
   .theme-lavender / .theme-pure-black
   ======================================== */

/* Default = Deep Navy (already set in styles.css :root, but also here for explicit theme-class) */
body.theme-deep-navy {
  --deep-navy: #0B1118;
  --midnight: #131B26;
  --soft-purple: #B8A4D8;
  --teal-glow: #5EEAD4;
  --soft-white: #F1F5F9;
  --subtle-gray: #94A3B8;
  --purple-glow: #C084FC;
  --teal-pure: #14B8A6;
}

/* Forest — green/teal forest mood */
body.theme-forest {
  --deep-navy: #0A1612;
  --midnight: #102017;
  --soft-purple: #A8E0B5;
  --teal-glow: #6EE7B7;
  --soft-white: #F0FDF4;
  --subtle-gray: #86A593;
  --purple-glow: #34D399;
  --teal-pure: #10B981;
}

body.theme-forest .bg-orbs .orb-1 {
  background: radial-gradient(circle, #6EE7B7, transparent 70%);
}
body.theme-forest .bg-orbs .orb-2 {
  background: radial-gradient(circle, #34D399, transparent 70%);
}
body.theme-forest .bg-orbs .orb-3 {
  background: radial-gradient(circle, #A8E0B5, transparent 70%);
}

/* Sunset — warm orange/pink */
body.theme-sunset {
  --deep-navy: #1A0E14;
  --midnight: #2A1820;
  --soft-purple: #FBA4D8;
  --teal-glow: #FDB663;
  --soft-white: #FFF7ED;
  --subtle-gray: #C99B8C;
  --purple-glow: #F87171;
  --teal-pure: #FB923C;
}

body.theme-sunset .bg-orbs .orb-1 {
  background: radial-gradient(circle, #FBA4D8, transparent 70%);
}
body.theme-sunset .bg-orbs .orb-2 {
  background: radial-gradient(circle, #FDB663, transparent 70%);
}
body.theme-sunset .bg-orbs .orb-3 {
  background: radial-gradient(circle, #F87171, transparent 70%);
}

/* Lavender — soft purple/pink */
body.theme-lavender {
  --deep-navy: #14101D;
  --midnight: #1F1830;
  --soft-purple: #DDD6FE;
  --teal-glow: #C4B5FD;
  --soft-white: #FAF5FF;
  --subtle-gray: #A89FBE;
  --purple-glow: #A78BFA;
  --teal-pure: #8B5CF6;
}

body.theme-lavender .bg-orbs .orb-1 {
  background: radial-gradient(circle, #DDD6FE, transparent 70%);
}
body.theme-lavender .bg-orbs .orb-2 {
  background: radial-gradient(circle, #A78BFA, transparent 70%);
}
body.theme-lavender .bg-orbs .orb-3 {
  background: radial-gradient(circle, #C4B5FD, transparent 70%);
}

/* Pure Black — minimalist OLED-friendly */
body.theme-pure-black {
  --deep-navy: #000000;
  --midnight: #0A0A0A;
  --soft-purple: #B8A4D8;
  --teal-glow: #5EEAD4;
  --soft-white: #FFFFFF;
  --subtle-gray: #71717A;
  --purple-glow: #C084FC;
  --teal-pure: #14B8A6;
}

body.theme-pure-black .bg-orbs {
  opacity: 0.4;
}

/* ─── Theme picker UI ─── */

.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.theme-card {
  position: relative;
  padding: 20px 16px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  overflow: hidden;
}

.theme-card.active {
  border-color: var(--teal-glow);
  box-shadow:
    0 0 24px rgba(94, 234, 212, 0.3),
    inset 0 0 20px rgba(94, 234, 212, 0.05);
}

.theme-card:hover:not(.active) {
  border-color: rgba(184, 164, 216, 0.3);
  transform: translateY(-2px);
}

.theme-preview {
  width: 100%;
  height: 80px;
  border-radius: 12px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.theme-preview-deep-navy {
  background: linear-gradient(135deg, #0B1118 0%, #131B26 50%, #B8A4D8 100%);
}

.theme-preview-forest {
  background: linear-gradient(135deg, #0A1612 0%, #10B981 70%, #6EE7B7 100%);
}

.theme-preview-sunset {
  background: linear-gradient(135deg, #1A0E14 0%, #FB923C 60%, #FBA4D8 100%);
}

.theme-preview-lavender {
  background: linear-gradient(135deg, #14101D 0%, #A78BFA 60%, #DDD6FE 100%);
}

.theme-preview-pure-black {
  background: linear-gradient(135deg, #000000 0%, #1A1A1A 70%, #5EEAD4 100%);
}

.theme-preview::after {
  content: '🪷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.theme-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--soft-white);
  letter-spacing: 0.3px;
}

.theme-card.active .theme-name {
  color: var(--teal-glow);
  font-weight: 600;
}

.theme-active-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-glow);
  color: var(--deep-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0);
  transition: var(--transition-base);
}

.theme-card.active .theme-active-badge {
  opacity: 1;
  transform: scale(1);
}