/* ============================================================================
   MY BÍBLIA ONLINE - CUSTOM STYLES & THEMING (ELITE EDITION)
   ============================================================================ */

/* --- SYSTEM CONFIGURATION --- */
:root {
  /* LIGHT THEME (DEFAULT) */
  --brand-50: #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  
  --accent-50: #fdf2f8;
  --accent-100: #fce7f3;
  --accent-500: #ec4899;
  --accent-600: #db2777;

  --bg-base: #f9fafb;
  --bg-card: #ffffff;
  --bg-border: #e5e7eb;
  
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;

  --font-serif: 'Lora', serif;
  --font-sans: 'Inter', sans-serif;
  
  --verse-size: 1.125rem;
  --verse-line-height: 1.8;
}

/* --- THEME DEFINITIONS --- */
html[data-theme="dark"] {
  --brand-50: rgba(99, 102, 241, 0.1);
  --brand-100: rgba(99, 102, 241, 0.15);
  --brand-200: rgba(99, 102, 241, 0.25);
  --brand-500: #818cf8;
  --brand-600: #6366f1;
  --brand-700: #4f46e5;

  --accent-50: rgba(236, 72, 153, 0.1);
  --accent-100: rgba(236, 72, 153, 0.2);
  --accent-500: #f472b6;
  --accent-600: #ec4899;

  --bg-base: #030712;
  --bg-card: #111827;
  --bg-border: #1f2937;
  
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-muted: #9ca3af;
}

html[data-theme="midnight"] {
  --brand-50: rgba(56, 189, 248, 0.1);
  --brand-100: rgba(56, 189, 248, 0.15);
  --brand-200: rgba(56, 189, 248, 0.25);
  --brand-500: #38bdf8;
  --brand-600: #0ea5e9;
  --brand-700: #0284c7;

  --accent-50: rgba(129, 140, 248, 0.1);
  --accent-100: rgba(129, 140, 248, 0.2);
  --accent-500: #818cf8;
  --accent-600: #6366f1;

  --bg-base: #0b132b;
  --bg-card: #1c2541;
  --bg-border: #3a506b;
  
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
}

html[data-theme="aurora"] {
  --brand-50: rgba(52, 211, 153, 0.1);
  --brand-100: rgba(52, 211, 153, 0.15);
  --brand-200: rgba(52, 211, 153, 0.25);
  --brand-500: #34d399;
  --brand-600: #10b981;
  --brand-700: #059669;

  --accent-50: rgba(45, 212, 191, 0.1);
  --accent-100: rgba(45, 212, 191, 0.2);
  --accent-500: #2dd4bf;
  --accent-600: #0d9488;

  --bg-base: #091e1a;
  --bg-card: #0f2d26;
  --bg-border: #1b4d40;
  
  --text-primary: #f0fdf4;
  --text-secondary: #dcfce7;
  --text-muted: #a7f3d0;
}

/* --- LAYOUT & TRANSITIONS --- */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Base card styling */
.card-theme {
  background-color: var(--bg-card);
  border-color: var(--bg-border);
}

/* --- AUDIO BIBLE HIGHLIGHT --- */
.reading-highlight {
  background-color: var(--brand-50) !important;
  box-shadow: inset 4px 0 0 var(--brand-500);
  padding-left: 0.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
  transition: all 0.3s ease;
}

/* --- 3D CARD FLIPPING (PROMISE BOX) --- */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* --- FLOATING HEART ANIMATION (PRAYER WALL) --- */
@keyframes float-prayer-heart {
  0% {
    transform: translateY(0) scale(0.8) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-140px) scale(1.4) rotate(15deg);
    opacity: 0;
  }
}

.float-heart {
  position: absolute;
  pointer-events: none;
  animation: float-prayer-heart 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  z-index: 100;
}

/* --- UTILITIES --- */
.text-serif {
  font-family: var(--font-serif);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--bg-border);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-200);
}

/* --- GLASSMORPHISM --- */
.glass-effect {
  background-color: var(--bg-card);
  opacity: 0.92;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- CLEAN READING MODE OVERRIDES --- */
.clean-mode-active #sidebar,
.clean-mode-active header,
.clean-mode-active footer,
.clean-mode-active .fixed-bottom-bar,
.clean-mode-active #btn-chat-toggle {
  display: none !important;
}

.clean-mode-active main {
  max-width: 52rem !important;
  margin: 0 auto !important;
  padding: 3rem 1.5rem !important;
}

.clean-mode-active #main-content {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --- THEME-AWARE HIGHLIGHT COLORS --- */
:root {
  --hl-yellow: rgba(253, 224, 71, 0.4);
  --hl-green: rgba(74, 222, 128, 0.4);
  --hl-blue: rgba(96, 165, 250, 0.4);
  --hl-pink: rgba(244, 114, 182, 0.4);
  
  --hl-yellow-hover: rgba(253, 224, 71, 0.6);
  --hl-green-hover: rgba(74, 222, 128, 0.6);
  --hl-blue-hover: rgba(96, 165, 250, 0.6);
  --hl-pink-hover: rgba(244, 114, 182, 0.6);
}

html[data-theme="dark"] {
  --hl-yellow: rgba(234, 179, 8, 0.25);
  --hl-green: rgba(34, 197, 94, 0.25);
  --hl-blue: rgba(59, 130, 246, 0.25);
  --hl-pink: rgba(236, 72, 153, 0.25);
  
  --hl-yellow-hover: rgba(234, 179, 8, 0.4);
  --hl-green-hover: rgba(34, 197, 94, 0.4);
  --hl-blue-hover: rgba(59, 130, 246, 0.4);
  --hl-pink-hover: rgba(236, 72, 153, 0.4);
}

html[data-theme="midnight"] {
  --hl-yellow: rgba(234, 179, 8, 0.22);
  --hl-green: rgba(34, 197, 94, 0.22);
  --hl-blue: rgba(56, 189, 248, 0.22);
  --hl-pink: rgba(129, 140, 248, 0.22);
  
  --hl-yellow-hover: rgba(234, 179, 8, 0.38);
  --hl-green-hover: rgba(34, 197, 94, 0.38);
  --hl-blue-hover: rgba(56, 189, 248, 0.38);
  --hl-pink-hover: rgba(129, 140, 248, 0.38);
}

html[data-theme="aurora"] {
  --hl-yellow: rgba(52, 211, 153, 0.2);
  --hl-green: rgba(45, 212, 191, 0.2);
  --hl-blue: rgba(52, 211, 153, 0.2);
  --hl-pink: rgba(45, 212, 191, 0.2);
  
  --hl-yellow-hover: rgba(52, 211, 153, 0.35);
  --hl-green-hover: rgba(45, 212, 191, 0.35);
  --hl-blue-hover: rgba(52, 211, 153, 0.35);
  --hl-pink-hover: rgba(45, 212, 191, 0.35);
}

.bg-hl-yellow { background-color: var(--hl-yellow) !important; }
.bg-hl-green  { background-color: var(--hl-green) !important; }
.bg-hl-blue   { background-color: var(--hl-blue) !important; }
.bg-hl-pink   { background-color: var(--hl-pink) !important; }

.hover-hl-yellow:hover { background-color: var(--hl-yellow-hover) !important; }
.hover-hl-green:hover  { background-color: var(--hl-green-hover) !important; }
.hover-hl-blue:hover   { background-color: var(--hl-blue-hover) !important; }
.hover-hl-pink:hover   { background-color: var(--hl-pink-hover) !important; }