/* Dark Mode Styles with WCAG AA Compliant Colors */

/* CSS Variables for theming */
:root {
  /* Light mode colors */
  --bg-primary: white;
  --bg-secondary: #f5f7fa;
  --bg-gradient-start: #f5f7fa;
  --bg-gradient-end: #c3cfe2;
  --text-primary: #2c3e50;
  --text-secondary: #5a6c7d;
  --text-muted: #6c7a89;
  --link-color: #2471a3;
  --link-hover: #1a5490;
  --border-color: #ecf0f1;
  --border-dark: #ddd;
  --shadow-color: rgba(0,0,0,0.1);
  --highlight-bg: #fdd835;
  --highlight-text: #000;
  --success-bg: #e8f5e8;
  --success-text: #27ae60;
  --warning-bg: #fdf2e9;
  --warning-text: #e67e22;
  --search-panel-bg: white;
  --toggle-bg: white;
  --toggle-color: #2c3e50;
  --book-card-bg: white;
  --book-card-hover: #f8f9fa;
  --footer-border: #ecf0f1;
  --chapter-link-bg: #f5f5f5;
  --chapter-link-hover: #3498db;
  --testament-badge-bg: #e8f5e8;
  --testament-badge-text: #27ae60;
  --nt-badge-bg: #fdf2e9;
  --nt-badge-text: #e67e22;
  --search-banner-bg: #e3f2fd;
  --nav-link-color: #2471a3;
  --nav-link-hover: #1a5490;
}

/* Dark mode colors - Chocolate theme with tan/gold accents - WCAG AA compliant */
[data-theme="dark"] {
  --bg-primary: #2b1810;
  --bg-secondary: #3d2418;
  --bg-gradient-start: #1f1108;
  --bg-gradient-end: #3d2418;
  --text-primary: #f5deb3;
  --text-secondary: #daa520;
  --text-muted: #cd853f;
  --link-color: #ffd700;
  --link-hover: #ffed4e;
  --border-color: #4a2c17;
  --border-dark: #5d3a1f;
  --shadow-color: rgba(0,0,0,0.5);
  --highlight-bg: #ffd700;
  --highlight-text: #2b1810;
  --success-bg: #3d2f1f;
  --success-text: #90ee90;
  --warning-bg: #4a2c17;
  --warning-text: #ffa500;
  --search-panel-bg: #3d2418;
  --toggle-bg: #4a2c17;
  --toggle-color: #f5deb3;
  --book-card-bg: #3d2418;
  --book-card-hover: #4a2c17;
  --footer-border: #4a2c17;
  --chapter-link-bg: #4a2c17;
  --chapter-link-hover: #ffd700;
  --testament-badge-bg: #3d2f1f;
  --testament-badge-text: #90ee90;
  --nt-badge-bg: #4a2c17;
  --nt-badge-text: #ffa500;
  --search-banner-bg: #4a2c17;
  --nav-link-color: #ffd700;
  --nav-link-hover: #ffed4e;
}

/* Apply theme colors throughout */
body {
  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

.container {
  background: var(--bg-primary);
  box-shadow: 0 10px 30px var(--shadow-color);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header {
  border-bottom-color: var(--link-color);
}

.title {
  color: var(--text-primary);
}

.subtitle {
  color: var(--text-secondary);
}

.translation-selector {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.translation-selector select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-dark);
}

.book-card {
  background: var(--book-card-bg);
  border-color: var(--border-color);
  transition: all 0.3s ease;
}

.book-card:hover {
  background: var(--book-card-hover);
  border-color: var(--link-color);
}

.book-title {
  color: var(--link-color);
}

.book-card:hover .book-title {
  color: var(--link-hover);
}

.book-meta {
  color: var(--text-secondary);
}

.book-card.unavailable .book-title {
  color: var(--text-muted);
}

.book-card.unavailable .book-meta {
  color: var(--text-muted);
}

.testament-badge {
  background: var(--testament-badge-bg);
  color: var(--testament-badge-text);
}

.testament-badge.new {
  background: var(--nt-badge-bg);
  color: var(--nt-badge-text);
}

.book-card.unavailable .testament-badge {
  background: var(--border-color);
  color: var(--text-muted);
}

.stat-label {
  color: var(--text-secondary);
}

.stat-value {
  color: var(--text-primary);
}

.book-card.unavailable .stat-value {
  color: var(--text-muted);
}

.toggle-chapters {
  color: var(--link-color);
}

.toggle-chapters:hover {
  color: var(--link-hover);
}

.chapters-grid {
  background: var(--bg-secondary);
  border-top-color: var(--border-color);
}

.chapter-link {
  background: var(--chapter-link-bg);
  color: var(--link-color);
  border-color: var(--border-color);
}

.chapter-link:hover {
  background: var(--chapter-link-hover);
  color: white;
  border-color: var(--chapter-link-hover);
}

.footer {
  border-top-color: var(--footer-border);
  color: var(--text-secondary);
}

.footer-links a {
  color: var(--link-color);
}

.footer-links a:hover {
  color: var(--link-hover);
}

/* Search panel dark mode */
.search-panel {
  background: var(--search-panel-bg);
  border-color: var(--border-color);
}

.search-input {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.search-input:focus {
  border-color: var(--link-color);
}

.search-filters label {
  color: var(--text-secondary);
}

.filter-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.filter-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--link-color);
}

.filter-btn.active {
  background: var(--link-color);
  color: white;
  border-color: var(--link-color);
}

.search-result {
  background: var(--bg-primary);
  border-color: var(--border-color);
}

.search-result:hover {
  background: var(--bg-secondary);
  border-color: var(--link-color);
}

.search-result-ref {
  color: var(--link-color);
}

.search-result-text {
  color: var(--text-primary);
}

.search-match-info {
  color: var(--text-muted);
}

.page-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.page-btn:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--link-color);
}

.page-btn.active {
  background: var(--link-color);
  color: white;
  border-color: var(--link-color);
}

.page-btn:disabled {
  color: var(--text-muted);
}

/* Dark mode specific adjustments */
[data-theme="dark"] .gradient-button {
  background: linear-gradient(135deg, var(--link-color), var(--link-hover));
}

[data-theme="dark"] .container {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

[data-theme="dark"] .search-highlight {
  background: #fdd835;
  color: #000;
}

/* Dark mode toggle button styling */
.dark-mode-toggle {
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  box-shadow: 0 4px 12px var(--shadow-color);
}

/* Navigation links */
a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover);
}

/* Book navigation */
.book-navigation a {
  color: var(--nav-link-color);
}

.book-navigation a:hover {
  color: var(--nav-link-hover);
}

/* Chapter navigation */
.chapter-navigation a {
  color: var(--nav-link-color);
}

.chapter-navigation a:hover {
  color: var(--nav-link-hover);
}

/* Verse styles */
.verse-number {
  color: var(--text-muted);
}

.verse-text {
  color: var(--text-primary);
}

/* Clear search button */
.clear-search {
  background: none;
  border: 1px solid var(--link-color);
  color: var(--link-color);
}

.clear-search:hover {
  background: var(--link-color);
  color: white;
}

/* Current highlight for verses */
.verse.current-highlight {
  background: var(--highlight-bg);
  color: var(--highlight-text);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .dark-mode-toggle {
    right: 10px !important;
    top: 70px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
}