/* =============================
   Light Theme Override
   Applied to audio.html and html/ pages
============================= */
:root {
  --bg-primary:   #ffffff;
  --bg-secondary: #f4f4f4;
  --bg-card:      #f9f9f9;
  --text-primary: #1a1a1a;
  --text-muted:   #888888;
  --border:       #e0e0e0;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Header */
header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--border);
}
header.scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}

/* Section title shadow adjustment */
.section-title {
  text-shadow: none;
  color: var(--text-primary);
}

/* Mobile Nav */
.nav-mobile {
  background: var(--bg-primary);
}

/* Slider controls */
.slider-prev, .slider-next {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}

/* Page Banner */
.page-banner {
  background: var(--bg-secondary);
  border-bottom-color: var(--border);
}

/* Remarks */
.remarks-body {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* Track table hover */
.track-table tbody tr:hover td {
  background: var(--bg-secondary);
}

/* Footer */
footer {
  background: var(--bg-secondary);
  border-top-color: var(--border);
}

.footer-x {
  background: var(--bg-card);
  border-color: var(--border);
}
.footer-x svg {
  fill: var(--text-primary);
}
.footer-x:hover {
  background: #111;
  border-color: #111;
}
.footer-x:hover svg {
  fill: #fff;
}

/* Age Modal */
.age-modal-box {
  background: var(--bg-primary);
  border-color: var(--border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1);
}

/* Parallax items - lighten for white bg */
.parallax-item {
  opacity: 0.12;
}