/* ============================================
   Theme: Light Classic
   Clean light background with green accents
   Traditional readable design on light background
   ============================================ */
:root {
  --font-body: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
  --font-heading: 'Inter', 'Segoe UI', sans-serif;
  --primary-green: #1a6b3c;
  --primary-dark: #0f4d2a;
  --secondary-green: #2a8f50;
  --accent-gold: #b8860b;
  --accent-gold-light: #d4a017;
  --text-light: #ffffff;
  --text-body: #3a3a3a;
  --text-dark: #1a1a1a;
  --bg-page: #f5f0e8;
  --bg-content: #faf7f2;
  --bg-card: rgba(0, 0, 0, 0.02);
  --bg-card-hover: rgba(0, 0, 0, 0.04);
  --border-subtle: rgba(26, 107, 60, 0.15);
  --border-accent: rgba(26, 107, 60, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --pattern-color: rgba(26, 107, 60, 0.015);
  --header-gradient: linear-gradient(135deg, #0f4d2a 0%, #1a6b3c 50%, #0f4d2a 100%);
  --footer-gradient: linear-gradient(135deg, #0f4d2a 0%, #0a3518 100%);
  --table-header-gradient: linear-gradient(135deg, #1a6b3c, #0f4d2a);
  --btn-primary-gradient: linear-gradient(135deg, #1a6b3c, #0f4d2a);
  --btn-gold-gradient: linear-gradient(135deg, #b8860b, #9a7209);
  --hero-gradient: linear-gradient(135deg, rgba(26,107,60,0.3) 0%, rgba(15,77,42,0.5) 100%);
  --visited-link: #6e4a8a;
  --row-hover-bg: rgba(26, 107, 60, 0.04);
}

/* Light theme needs additional overrides for readability */
.content-area a {
  color: var(--primary-green);
}

.content-area a:hover {
  border-bottom-color: var(--primary-green);
}

.content-area a:visited {
  color: var(--visited-link);
}

.site-nav a {
  color: var(--text-light);
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.85);
}

.page-title h1 {
  color: var(--primary-green);
}

.content-area h2,
.content-area h3,
.content-area h4 {
  color: var(--primary-dark);
}

.card-item a {
  color: var(--primary-green);
}

.card-item a:hover {
  color: var(--accent-gold);
}

.hadith {
  background: rgba(26, 107, 60, 0.04);
  border-color: rgba(26, 107, 60, 0.2);
}

.ayah-arabic {
  color: var(--text-dark);
  background: rgba(26, 107, 60, 0.03);
  border-color: rgba(26, 107, 60, 0.15);
}

.back-link {
  color: var(--primary-green);
}

.surah-item .surah-num {
  color: var(--primary-green);
}

.surah-item .surah-name a {
  color: var(--text-body);
}

.surah-item .surah-name a:hover {
  color: var(--primary-green);
}

.breadcrumb a {
  color: var(--primary-green);
}