/* Custom Base Theme Styles & Colors */
:root {
  --bg-main: #faf5ff;
  --theme-accent: #9333ea;
  --theme-accent-light: #f3e8ff;
  --card-border: #e9d5ff;
}

/* Theme Variant Classes (Clearer & More Distinct Tones with Pastel Elegance) */
body.theme-purple {
  --bg-main: #faf5ff;
  --theme-accent: #8b5cf6;
  --theme-accent-light: #f3e8ff;
}

body.theme-pink {
  --bg-main: #fff0f3;
  --theme-accent: #ec4899;
  --theme-accent-light: #ffe4e6;
}

body.theme-blue {
  --bg-main: #f0f8ff;
  --theme-accent: #0284c7;
  --theme-accent-light: #e0f2fe;
}

body.theme-orange {
  --bg-main: #fff6ee;
  --theme-accent: #f97316;
  --theme-accent-light: #ffedd5;
}

body.theme-yellow {
  --bg-main: #fffde7;
  --theme-accent: #eab308;
  --theme-accent-light: #fef9c3;
}

body.theme-green {
  --bg-main: #f0fdf4;
  --theme-accent: #10b981;
  --theme-accent-light: #dcfce7;
}

body.theme-rainbow {
  --bg-main: #faf5ff;
  --theme-accent: #a855f7;
  --theme-accent-light: #ede9fe;
}

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

/* Navigation Tabs */
.nav-tab.active {
  color: var(--theme-accent);
  transform: translateY(-2px);
}

.nav-tab.active span:first-child {
  transform: scale(1.15);
}

/* 30-Day Glowing Blooming Mascot */
.mascot-glow-radiant {
  filter: drop-shadow(0 0 16px rgba(244, 63, 94, 0.45)) drop-shadow(0 0 32px rgba(168, 85, 247, 0.3));
  animation: radiantPulse 3s ease-in-out infinite alternate;
}

@keyframes radiantPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.4)); }
  100% { transform: scale(1.04); filter: drop-shadow(0 0 24px rgba(236, 72, 153, 0.65)) drop-shadow(0 0 40px rgba(147, 51, 234, 0.4)); }
}

/* Quran Reader Typographies */
.quran-font-uthmani {
  font-family: 'Amiri', 'Traditional Arabic', serif;
}

.quran-font-cairo {
  font-family: 'Cairo', sans-serif;
}

.quran-font-tajawal {
  font-family: 'Tajawal', sans-serif;
}

/* Micro-interactions */
.bounce-subtle {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bounce-subtle:active {
  transform: scale(0.94);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}