/* ==========================================================================
   Baby Fingers — 6 Playful Themes
   ========================================================================== */

/* ---------- Theme: Rainbow (Default) ---------- */
:root,
[data-theme="rainbow"] {
  --theme-bg: linear-gradient(135deg, #FF6B6B 0%, #FFD93D 25%, #6BCB77 50%, #4ECDC4 75%, #9B59B6 100%);
  --theme-bg-size: 400% 400%;
  --theme-letter-colors: #FF6B6B, #FFD93D, #FF69B4, #6BCB77, #4ECDC4, #9B59B6, #FF8C42;
  --theme-surface: rgba(255, 255, 255, 0.12);
  --theme-text: #FFFFFF;
  --theme-accent: #FFD93D;
  --theme-glow: rgba(255, 107, 107, 0.4);
}

/* ---------- Theme: Ocean ---------- */
[data-theme="ocean"] {
  --theme-bg: linear-gradient(135deg, #0077B6 0%, #00B4D8 30%, #48CAE4 60%, #90E0EF 100%);
  --theme-bg-size: 400% 400%;
  --theme-letter-colors: #CAF0F8, #90E0EF, #48CAE4, #00B4D8, #FFD93D, #FF6B6B, #FFFFFF;
  --theme-surface: rgba(255, 255, 255, 0.15);
  --theme-text: #FFFFFF;
  --theme-accent: #48CAE4;
  --theme-glow: rgba(0, 180, 216, 0.4);
}

/* ---------- Theme: Space ---------- */
[data-theme="space"] {
  --theme-bg: linear-gradient(135deg, #0D1B2A 0%, #1B2838 30%, #2D1B69 60%, #1A0533 100%);
  --theme-bg-size: 400% 400%;
  --theme-letter-colors: #E0AAFF, #C77DFF, #9D4EDD, #7B2FBE, #FFD93D, #FF6B6B, #4ECDC4;
  --theme-surface: rgba(255, 255, 255, 0.08);
  --theme-text: #E0E0E0;
  --theme-accent: #C77DFF;
  --theme-glow: rgba(199, 125, 255, 0.4);
}

/* ---------- Theme: Jungle ---------- */
[data-theme="jungle"] {
  --theme-bg: linear-gradient(135deg, #2D6A4F 0%, #40916C 30%, #52B788 60%, #95D5B2 100%);
  --theme-bg-size: 400% 400%;
  --theme-letter-colors: #D8F3DC, #B7E4C7, #FFD93D, #FF8C42, #FF6B6B, #FFFFFF, #95D5B2;
  --theme-surface: rgba(255, 255, 255, 0.12);
  --theme-text: #FFFFFF;
  --theme-accent: #95D5B2;
  --theme-glow: rgba(82, 183, 136, 0.4);
}

/* ---------- Theme: Candy ---------- */
[data-theme="candy"] {
  --theme-bg: linear-gradient(135deg, #FF69B4 0%, #FF85C8 25%, #FFB3D9 50%, #FFD93D 75%, #FF8C42 100%);
  --theme-bg-size: 400% 400%;
  --theme-letter-colors: #FFFFFF, #FFE0F0, #FF69B4, #FFD93D, #6BCB77, #4ECDC4, #9B59B6;
  --theme-surface: rgba(255, 255, 255, 0.2);
  --theme-text: #FFFFFF;
  --theme-accent: #FF69B4;
  --theme-glow: rgba(255, 105, 180, 0.4);
}

/* ---------- Theme: Farm ---------- */
[data-theme="farm"] {
  --theme-bg: linear-gradient(135deg, #87CEEB 0%, #98D8C8 30%, #7BC74D 50%, #F0E68C 80%, #DEB887 100%);
  --theme-bg-size: 400% 400%;
  --theme-letter-colors: #FFFFFF, #2C3E50, #FF6B6B, #FFD93D, #FF8C42, #6BCB77, #9B59B6;
  --theme-surface: rgba(255, 255, 255, 0.18);
  --theme-text: #2C3E50;
  --theme-accent: #7BC74D;
  --theme-glow: rgba(123, 199, 77, 0.4);
}

/* ---------- Theme Emoji Sets ---------- */
/* (Managed in JS — these are CSS fallback markers) */

/* ---------- Play Area Theme Application ---------- */
.play-area {
  background: var(--theme-bg);
  background-size: var(--theme-bg-size);
  animation: gradient-shift 15s ease infinite;
  color: var(--theme-text);
}

/* ---------- Theme Preview Swatches ---------- */
.theme-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--md-motion-duration-medium) var(--md-motion-easing-spring);
  position: relative;
}

.theme-swatch:hover {
  transform: scale(1.15);
  box-shadow: var(--md-elevation-3);
}

.theme-swatch.active {
  border-color: white;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--md-primary), var(--md-elevation-3);
}

.theme-swatch[data-theme="rainbow"] {
  background: linear-gradient(135deg, #FF6B6B, #FFD93D, #6BCB77, #4ECDC4);
}

.theme-swatch[data-theme="ocean"] {
  background: linear-gradient(135deg, #0077B6, #48CAE4, #90E0EF);
}

.theme-swatch[data-theme="space"] {
  background: linear-gradient(135deg, #0D1B2A, #2D1B69, #C77DFF);
}

.theme-swatch[data-theme="jungle"] {
  background: linear-gradient(135deg, #2D6A4F, #52B788, #95D5B2);
}

.theme-swatch[data-theme="candy"] {
  background: linear-gradient(135deg, #FF69B4, #FFB3D9, #FFD93D);
}

.theme-swatch[data-theme="farm"] {
  background: linear-gradient(135deg, #87CEEB, #7BC74D, #F0E68C);
}