/* Theme variables and overrides */

:root {

  --bg: #0b1120; /* default fallback (darkish) */

  --fg: #e5e7eb;

  --muted: #94a3b8;

  --link: #60a5fa;

  --card: #111827;

  /* Brand colors */

  --primary: #667eea;

  --secondary: #764ba2;

  --accent: #ffd700;

}



html[data-theme="light"] {

  color-scheme: light;

  --bg: #f5f7ff;

  --fg: #1a1a2e;

  --muted: #6b7280;

  --link: #667eea;

  --card: #ffffff;

  /* Light mode: softer, more vibrant backgrounds */

  --card-bg-light: #f9fafb;

  --card-hover: #eeecff;

  --section-bg: #f3f0ff;

}



html[data-theme="dark"] {

  color-scheme: dark;

  --bg: #0b1120;

  --fg: #e5e7eb;

  --muted: #94a3b8;

  --link: #60a5fa;

  --card: #111827;

}



/* Base application colors */

body {

  background: var(--bg);

  color: var(--fg);

  transition: background 0.3s ease, color 0.3s ease;

}



.main {

  background: var(--bg);

  color: var(--fg);

}



/* Links */

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

a:hover { opacity: 0.9; }



/* Header background variants */

html[data-theme="light"] .modern-header {

  background: linear-gradient(135deg, #e8e4ff 0%, #f5f7ff 100%);

  color: #1a1a2e;

  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);

}

html[data-theme="dark"] .modern-header {

  background: linear-gradient(135deg, #0b1220 0%, #111827 100%);

}



/* Footer background variants */

html[data-theme="light"] .modern-footer {

  background: linear-gradient(135deg, #e8e4ff 0%, #f0ebff 50%, #e5deff 100%);

  color: #1a1a2e;

  box-shadow: 0 -2px 8px rgba(102, 126, 234, 0.1);

}

html[data-theme="dark"] .modern-footer {

  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);

}



/* Cards and common containers */

.card, .panel, .box, .news-card, .book-card {

  background: var(--card);

  color: var(--fg);

  transition: all 0.3s ease;

}



html[data-theme="light"] .card,

html[data-theme="light"] .panel,

html[data-theme="light"] .box,

html[data-theme="light"] .news-card,

html[data-theme="light"] .book-card {

  background: #ffffff;

  border: 1px solid rgba(102, 126, 234, 0.15);

  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);

}



html[data-theme="light"] .card:hover,

html[data-theme="light"] .panel:hover,

html[data-theme="light"] .box:hover,

html[data-theme="light"] .news-card:hover,

html[data-theme="light"] .book-card:hover {

  background: var(--card-hover);

  border-color: rgba(102, 126, 234, 0.3);

  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);

}



/* Navigation links color tuning */

.modern-header .nav-link { color: var(--fg); }

.modern-header .nav-link.active { color: var(--link); }



/* Theme toggle button visibility */

.theme-toggle-btn { cursor: pointer; }



/* ==============================

   Dark mode: navbar visibility

============================== */

html[data-theme="dark"] .main-navigation {

  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);

  border-top: 1px solid rgba(148, 163, 184, 0.25);

}



html[data-theme="dark"] .main-navigation .nav-link {

  color: #e5e7eb;

}



html[data-theme="dark"] .main-navigation .nav-link:hover {

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.18));

  color: #dbeafe;

  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);

}



html[data-theme="dark"] .main-navigation .nav-link.active {

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(14, 165, 233, 0.28));

  color: #ffffff;

  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);

  outline: 1px solid rgba(59, 130, 246, 0.35);

}



/* Light mode: navbar styling */

html[data-theme="light"] .main-navigation {

  background: linear-gradient(135deg, #e8e4ff 0%, #f0ebff 100%);

  border-top: 2px solid #667eea;

  border-bottom: 1px solid rgba(102, 126, 234, 0.15);

}



html[data-theme="light"] .main-navigation .nav-link {

  color: #1a1a2e;

  font-weight: 500;

}



html[data-theme="light"] .main-navigation .nav-link:hover {

  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));

  color: #667eea;

  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);

}



html[data-theme="light"] .main-navigation .nav-link.active {

  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));

  color: #667eea;

  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);

  border-bottom: 2px solid #667eea;

}



/* Buttons styling for light mode */

html[data-theme="light"] .btn,

html[data-theme="light"] button,

html[data-theme="light"] .submit-btn {

  transition: all 0.3s ease;

}



html[data-theme="light"] .btn-primary,

html[data-theme="light"] .submit-btn {

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  color: white;

  border: none;

}



html[data-theme="light"] .btn-primary:hover,

html[data-theme="light"] .submit-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);

}



/* Form inputs light mode */

html[data-theme="light"] .form-input,

html[data-theme="light"] .form-textarea,

html[data-theme="light"] .form-select,

html[data-theme="light"] input,

html[data-theme="light"] textarea,

html[data-theme="light"] select {

  background: #ffffff;

  color: #1a1a2e;

  border: 1px solid rgba(102, 126, 234, 0.2);

  transition: all 0.3s ease;

}



html[data-theme="light"] .form-input:focus,

html[data-theme="light"] .form-textarea:focus,

html[data-theme="light"] .form-select:focus,

html[data-theme="light"] input:focus,

html[data-theme="light"] textarea:focus,

html[data-theme="light"] select:focus {

  border-color: #667eea;

  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);

}



/* Section backgrounds for light mode */

html[data-theme="light"] .section-hero,

html[data-theme="light"] .section-featured,

html[data-theme="light"] section {

  background: var(--section-bg);

}



html[data-theme="light"] .section-hero {

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  color: white;

}



html[data-theme="light"] .section-featured {

  background: linear-gradient(135deg, #f0ebff 0%, #e8e4ff 100%);

}



/* Badges and pills */

html[data-theme="light"] .badge,

html[data-theme="light"] .pill,

html[data-theme="light"] .tag {

  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));

  color: #667eea;

  border: 1px solid rgba(102, 126, 234, 0.3);

}



html[data-theme="dark"] .dropdown-menu {

  background: #0f172a; /* slate-900 */

  border-color: #1f2937; /* slate-800 */

}



html[data-theme="dark"] .dropdown-item {

  color: #cbd5e1; /* slate-300 */

}



html[data-theme="dark"] .dropdown-item:hover {

  background: rgba(255, 255, 255, 0.06);

  color: #93c5fd;

}