@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Amiri:ital,wght@0,400;0,700;1,400&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Serif:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Source+Serif+4:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* Sacred Serenity Tokens (Light / Parchment) */
  --color-primary: #003527;
  --color-on-primary: #ffffff;
  --color-primary-container: #064e3b;
  --color-on-primary-container: #80bea6;
  --color-primary-fixed: #b0f0d6;
  --color-primary-fixed-dim: #95d3ba;
  
  --color-background: #f8f9ff;
  --color-on-background: #121c28;
  
  --color-surface: #ffffff;
  --color-on-surface: #121c28;
  --color-surface-dim: #d1dbec;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f5fb;
  --color-surface-container: #e8eef8;
  --color-surface-container-high: #dfe7f4;
  --color-surface-container-highest: #d5e0f0;
  --color-on-surface-variant: #404944;
  
  --color-tertiary: #735c00;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #cca72f;
  --color-gold-accent: #d4af37;
  --color-gold-light: #fef8e7;
  
  --color-outline: #707974;
  --color-outline-variant: #bfc9c3;
  --color-border-subtle: rgba(191, 201, 195, 0.4);

  --font-quran: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif;
  --font-display: 'Noto Serif', 'Amiri', serif;
  --font-body: 'Source Serif 4', 'Amiri', serif;
  --font-ui: 'Plus Jakarta Sans', 'Noto Naskh Arabic', sans-serif;
  
  --quran-font-size: 28px;
  --quran-line-height: 2.2;
}

/* ================= SACRED SERENITY DARK MODE (FROM DARKUI) ================= */
[data-theme="dark"] {
  --color-primary: #10b981;
  --color-on-primary: #ffffff;
  --color-primary-container: #064e3b;
  --color-on-primary-container: #a7f3d0;
  --color-primary-fixed: #34d399;
  --color-primary-fixed-dim: #10b981;
  
  --color-background: #060a08;
  --color-on-background: #f8fafc;
  
  --color-surface: #0f1714;
  --color-on-surface: #f1f5f9;
  --color-surface-dim: #080d0b;
  --color-surface-container-lowest: #0a110e;
  --color-surface-container-low: #121c17;
  --color-surface-container: #16241e;
  --color-surface-container-high: #1c2e26;
  --color-surface-container-highest: #253d33;
  --color-on-surface-variant: #94a3b8;
  
  --color-tertiary: #fbbf24;
  --color-on-tertiary: #451a03;
  --color-tertiary-container: #b45309;
  --color-gold-accent: #fbbf24;
  --color-gold-light: rgba(251, 191, 36, 0.15);
  
  --color-outline: #64748b;
  --color-outline-variant: #334155;
  --color-border-subtle: rgba(16, 185, 129, 0.18);
}

/* ================= WARM SEPIA THEME ================= */
[data-theme="sepia"] {
  --color-primary: #4a2c0f;
  --color-on-primary: #fffaf0;
  --color-primary-container: #6e431a;
  --color-on-primary-container: #edd5bc;
  
  --color-background: #fbf5e8;
  --color-on-background: #2d2218;
  
  --color-surface: #f7edd7;
  --color-on-surface: #2d2218;
  --color-surface-dim: #ebdcc0;
  --color-surface-container-lowest: #fdfaf4;
  --color-surface-container-low: #f4e7cd;
  --color-surface-container: #eddcc0;
  --color-surface-container-high: #e3ceb0;
  --color-surface-container-highest: #dac19f;
  --color-on-surface-variant: #6b5744;
  
  --color-tertiary: #92400e;
  --color-gold-accent: #b45309;
  --color-gold-light: #fffbeb;
  
  --color-border-subtle: rgba(146, 64, 14, 0.2);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-ui);
  line-height: 1.5;
  user-select: none;
  overflow-x: hidden;
  direction: rtl;
  text-align: right;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

.font-quran-script {
  font-family: var(--font-quran);
  font-size: var(--quran-font-size);
  line-height: var(--quran-line-height);
  word-spacing: 2px;
}

.font-display-title {
  font-family: var(--font-display);
}

.font-body-reading {
  font-family: var(--font-body);
}

/* Material Symbols Helper */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1;
}

/* Glassmorphism & Cards */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .glass-panel {
  background: rgba(15, 23, 20, 0.88);
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}
[data-theme="sepia"] .glass-panel {
  background: rgba(247, 237, 215, 0.85);
}

.surah-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}
.surah-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -6px rgba(0, 53, 39, 0.12);
}
[data-theme="dark"] .surah-card {
  background-color: #0f1714;
  border-color: rgba(16, 185, 129, 0.14);
}
[data-theme="dark"] .surah-card:hover {
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.7);
  border-color: var(--color-primary);
}

/* Ayah Marker 8-Point Star */
.ayah-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  height: 38px;
  margin: 0 8px;
  vertical-align: middle;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}
[data-theme="dark"] .ayah-number-badge {
  color: #f8fafc;
}

.ayah-number-badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-gold-accent);
  stroke-width: 1.6;
}

/* Active Highlighted Verse */
.ayah-row {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid transparent;
}
[data-theme="dark"] .ayah-row {
  background-color: #0c1410;
  border-color: rgba(16, 185, 129, 0.12);
}
.ayah-row.active-audio-ayah {
  background-color: var(--color-gold-light) !important;
  border-color: var(--color-gold-accent) !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.18);
  border-radius: 16px;
}
[data-theme="dark"] .ayah-row.active-audio-ayah {
  background-color: rgba(16, 185, 129, 0.14) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.25);
}

/* Dark Mode Hero Enhancements */
[data-theme="dark"] #readingKhatmahSection .bg-gradient-to-r,
[data-theme="dark"] #viewHome .bg-gradient-to-r {
  background: linear-gradient(135deg, #0b2e21 0%, #061f16 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7);
}

/* Dark Mode Cards & Inputs */
[data-theme="dark"] .bg-surface {
  background-color: #0f1714 !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}
[data-theme="dark"] .bg-surface-container-low {
  background-color: #090f0c !important;
  border-color: rgba(16, 185, 129, 0.14) !important;
}
[data-theme="dark"] .bg-surface-container {
  background-color: #14201b !important;
}
[data-theme="dark"] .bg-surface-container-high {
  background-color: #1a2a23 !important;
}
[data-theme="dark"] .bg-surface-container-highest {
  background-color: #22372e !important;
}

/* Dark Mode Checklist Items */
[data-theme="dark"] #khatmahSurahsChecklist > div,
[data-theme="dark"] #khatmahListeningChecklist > div {
  background-color: #0a110e !important;
  border-color: rgba(16, 185, 129, 0.16) !important;
}
[data-theme="dark"] #khatmahSurahsChecklist > div:hover,
[data-theme="dark"] #khatmahListeningChecklist > div:hover {
  border-color: var(--color-primary) !important;
}

/* Audio Player Floating Bar */
.audio-player-container {
  box-shadow: 0 -8px 32px rgba(0, 53, 39, 0.08);
}
[data-theme="dark"] .audio-player-container {
  background-color: rgba(11, 18, 14, 0.95) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.18) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8);
}

/* Tasbih Animation */
.tasbih-btn {
  transition: transform 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tasbih-btn:active {
  transform: scale(0.94);
}

/* Islamic Pattern Watermark */
.bg-islamic-pattern {
  background-image: radial-gradient(var(--color-primary-fixed-dim) 0.75px, transparent 0.75px);
  background-size: 24px 24px;
}

/* Fade animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.35s ease-out forwards;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.03); opacity: 1; }
}
.pulse-glow {
  animation: pulseGlow 2.5s infinite ease-in-out;
}

/* Force Material Symbols Outlined font rendering */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  vertical-align: middle;
}