/* ── themes.css — background palette variants + theme switcher ── */

/*
 * Theme 1 (default) is defined in base.css — no override needed here.
 * Themes 2, 3 & 4 override body background and body::before gradient.
 * body::after (Anatolian pattern) is palette-agnostic — left unchanged.
 * NOTE: Theme 1 (default) and Theme 4 were swapped — Theme 4 now holds the original plum/mauve.
 */

/* ════════════════════════════════════
   THEME 2 — Emerald Forest
   Warm amber light source, deep green-teal atmosphere
   ════════════════════════════════════ */

body[data-theme="2"] {
  background: #040d08;
}

body[data-theme="2"]::before {
  background:
    /* ① Bright hot spot — warm gold top-right */
    radial-gradient(ellipse 52% 52% at 100% 0%,
      rgba(255,210,130,0.30) 0%,
      rgba(210,145,60,0.20)  30%,
      transparent            64%),

    /* ② Primary off-screen light — amber-olive from right */
    radial-gradient(ellipse 58% 115% at 108% 45%,
      rgba(200,135,55,0.46)  0%,
      rgba(90,150,55,0.16)   38%,
      transparent            63%),

    /* ③ Subtle forest-green bleed mid-right */
    radial-gradient(ellipse 42% 52% at 80% 30%,
      rgba(75,155,75,0.11)   0%,
      transparent            64%),

    /* ④ Warm amber diffusion, centre-right */
    radial-gradient(ellipse 52% 62% at 66% 60%,
      rgba(135,90,20,0.13)  0%,
      transparent           57%),

    /* ⑤ Deep forest — dominant mid-field tone */
    radial-gradient(ellipse 90% 70% at 50% 38%,
      rgba(16,68,36,0.30)   0%,
      rgba(9,48,24,0.18)    40%,
      transparent           72%),

    /* ⑥ Muted dark forest lower-centre */
    radial-gradient(ellipse 70% 55% at 40% 80%,
      rgba(7,40,16,0.22)   0%,
      transparent          60%),

    /* ⑦ Near-black forest — left side */
    radial-gradient(ellipse 78% 108% at -6% 52%,
      rgba(3,14,7,0.88)   0%,
      rgba(2,10,5,0.42)   50%,
      transparent         75%),

    /* ⑧ Dark pool — bottom-left corner */
    radial-gradient(ellipse 58% 42% at 6% 100%,
      rgba(2,8,4,0.92) 0%,
      transparent      60%),

    /* ⑨ Top center-left accent — cool olive bloom */
    radial-gradient(ellipse 55% 38% at 22% 0%,
      rgba(60,140,55,0.13) 0%,
      transparent          65%),

    /* ⑩ Top-right corner accent A — transparent in theme 2 */
    radial-gradient(ellipse 40% 35% at 88% 0%, transparent, transparent),

    /* ⑪ Top-right corner accent B — transparent in theme 2 */
    radial-gradient(ellipse 38% 32% at 72% 0%, transparent, transparent),

    #040d08;
}

/* ════════════════════════════════════
   THEME 3 — Crimson Forge
   Hot amber-red, industrial warmth
   ════════════════════════════════════ */

body[data-theme="3"] {
  background: #0e0503;
}

body[data-theme="3"]::before {
  background:
    /* ① Bright hot spot — intense gold-white top-right */
    radial-gradient(ellipse 52% 52% at 100% 0%,
      rgba(255,228,160,0.42) 0%,
      rgba(245,165,70,0.28)  30%,
      transparent            64%),

    /* ② Primary off-screen light — hot red-orange from right */
    radial-gradient(ellipse 58% 115% at 108% 45%,
      rgba(255,95,35,0.54)   0%,
      rgba(200,50,18,0.22)   38%,
      transparent            63%),

    /* ③ Crimson bleed mid-right */
    radial-gradient(ellipse 42% 52% at 80% 30%,
      rgba(200,52,24,0.16)   0%,
      transparent            64%),

    /* ④ Deep amber diffusion centre-right */
    radial-gradient(ellipse 52% 62% at 66% 60%,
      rgba(175,58,14,0.16)  0%,
      transparent           57%),

    /* ⑤ Deep crimson smoke — dominant mid-field */
    radial-gradient(ellipse 90% 70% at 50% 38%,
      rgba(95,16,8,0.32)    0%,
      rgba(68,10,4,0.18)    40%,
      transparent           72%),

    /* ⑥ Muted crimson lower-centre */
    radial-gradient(ellipse 70% 55% at 40% 80%,
      rgba(58,9,4,0.22)    0%,
      transparent          60%),

    /* ⑦ Near-black red — left side */
    radial-gradient(ellipse 78% 108% at -6% 52%,
      rgba(18,4,2,0.88)   0%,
      rgba(12,3,1,0.42)   50%,
      transparent         75%),

    /* ⑧ Dark pool — bottom-left corner */
    radial-gradient(ellipse 58% 42% at 6% 100%,
      rgba(10,2,1,0.92) 0%,
      transparent       60%),

    /* ⑨ Top center-left accent — amber-orange bloom */
    radial-gradient(ellipse 55% 38% at 22% 0%,
      rgba(220,95,25,0.18) 0%,
      transparent          65%),

    /* ⑩ Top-right corner accent A — transparent in theme 3 */
    radial-gradient(ellipse 40% 35% at 88% 0%, transparent, transparent),

    /* ⑪ Top-right corner accent B — transparent in theme 3 */
    radial-gradient(ellipse 38% 32% at 72% 0%, transparent, transparent),

    #0e0503;
}

/* ════════════════════════════════════
   THEME 4 — (sandbox — original Theme 1)
   Dusty plum/mauve base, warm amber right-side light; edit freely
   ════════════════════════════════════ */

body[data-theme="4"] {
  background: #0a0510;
}

body[data-theme="4"]::before {
  background:
    /* ① Bright hot spot — top-right, warm golden-white */
    radial-gradient(ellipse 52% 52% at 100% 0%,
      rgba(255,210,150,0.36) 0%,
      rgba(235,150,80,0.24)  30%,
      transparent            64%),

    /* ② Primary off-screen light — amber-rose from right */
    radial-gradient(ellipse 58% 115% at 108% 45%,
      rgba(240,135,85,0.52)  0%,
      rgba(200,80,120,0.20)  38%,
      transparent            63%),

    /* ③ Rose/pink bleed mid-right */
    radial-gradient(ellipse 42% 52% at 80% 30%,
      rgba(210,90,140,0.18)  0%,
      transparent            64%),

    /* ④ Warm amber diffusion, centre-right */
    radial-gradient(ellipse 52% 62% at 66% 60%,
      rgba(185,85,28,0.16)  0%,
      transparent           57%),

    /* ⑤ Dusty violet/mauve smoke — dominant mid-field tone */
    radial-gradient(ellipse 90% 70% at 50% 38%,
      rgba(95,30,120,0.30)  0%,
      rgba(70,18,95,0.18)   40%,
      transparent           72%),

    /* ⑥ Muted plum lower-centre */
    radial-gradient(ellipse 70% 55% at 40% 80%,
      rgba(65,14,85,0.22)  0%,
      transparent          60%),

    /* ⑦ Warm dark plum — left side (not cool navy, warmer) */
    radial-gradient(ellipse 78% 108% at -6% 52%,
      rgba(22,6,32,0.85)  0%,
      rgba(14,4,22,0.42)  50%,
      transparent         75%),

    /* ⑧ Dark mauve pool — bottom-left corner */
    radial-gradient(ellipse 58% 42% at 6% 100%,
      rgba(12,3,18,0.92) 0%,
      transparent        60%),

    /* ⑨ Top center-left accent — warm violet bloom */
    radial-gradient(ellipse 55% 38% at 22% 0%,
      rgba(140,45,180,0.16) 0%,
      transparent           65%),

    /* ⑩ Top-right corner accent A — transparent in theme 4 */
    radial-gradient(ellipse 40% 35% at 88% 0%, transparent, transparent),

    /* ⑪ Top-right corner accent B — transparent in theme 4 */
    radial-gradient(ellipse 38% 32% at 72% 0%, transparent, transparent),

    #0a0510;
}

/* ════════════════════════════════════
   THEME SWITCHER — temporary UI
   ════════════════════════════════════ */

.theme-switcher {
  display: none;
}

.theme-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.42);
  font: 600 0.62rem/1 var(--font-mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.theme-btn:hover {
  border-color: rgba(242,166,36,0.52);
  color: var(--gold);
  background: rgba(242,166,36,0.08);
}

.theme-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(242,166,36,0.15);
}

/* Hide switcher on portrait — must live in themes.css (loaded last) to win cascade */
@media (orientation: portrait), (max-width: 768px) {
  .theme-switcher { display: none; }
}