:root {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f3eb;
  --bg-card: #fffdf8;
  --bg-elevated: #eee6d8;
  --text: #211c17;
  --text-secondary: #6c6257;
  --accent: #9b5d17;
  --accent-light: #80501a;
  --accent-dim: rgba(155, 93, 23, 0.11);
  --border: rgba(68, 50, 31, 0.13);
  --shadow: 0 24px 70px rgba(78, 56, 29, 0.13);
}

.theme-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-light);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.theme-toggle:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(212, 160, 84, .35);
  transform: translateY(-1px);
}

.theme-symbol {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.18rem;
  line-height: 1;
}

body,
nav,
.mobile-menu,
.music-bar,
.gallery-section,
.philosophy-card,
.instrument-card,
.why-card,
.contact-section,
.contact-item,
.contact-cta-card,
.fact-strip,
.section-muted,
.card,
.detail-row,
.contact-card,
.notice,
.cta-band,
footer {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% 12%, rgba(166, 103, 29, .09), transparent 27rem),
    var(--bg);
}

html[data-theme="light"] nav,
html[data-theme="light"] nav.scrolled {
  background: rgba(247, 243, 235, .91);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .mobile-menu {
  background: rgba(247, 243, 235, .98);
}

html[data-theme="light"] .music-bar {
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 10px 34px rgba(78, 56, 29, .14);
}

html[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(166, 103, 29, .1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(130, 105, 74, .07) 0%, transparent 50%);
}

html[data-theme="light"] .hero-grid,
html[data-theme="light"] .page-hero::before {
  background-image:
    linear-gradient(rgba(64, 47, 29, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 47, 29, .035) 1px, transparent 1px);
}

html[data-theme="light"] .hero-images { opacity: .2; }

html[data-theme="light"] .brand-lockup {
  background:
    radial-gradient(circle at 55% 34%, rgba(155, 93, 23, .08), transparent 44%),
    linear-gradient(145deg, rgba(255, 253, 248, .82), rgba(238, 230, 216, .58));
  border-color: rgba(155, 93, 23, .2);
  box-shadow: 0 22px 58px rgba(78, 56, 29, .12);
}

html[data-theme="light"] .brand-lockup::before {
  border-color: rgba(155, 93, 23, .1);
}

html[data-theme="light"] .brand-mark {
  filter:
    drop-shadow(0 1px 1px rgba(94, 55, 13, .3))
    drop-shadow(0 12px 24px rgba(78, 56, 29, .1));
}

/* Story pages reuse the brand-card look with their own class names, so they
   need the same daytime treatment as .brand-lockup above. */
html[data-theme="light"] .story-symbol {
  background:
    radial-gradient(circle at 55% 34%, rgba(155, 93, 23, .08), transparent 44%),
    linear-gradient(145deg, rgba(255, 253, 248, .82), rgba(238, 230, 216, .58));
  border-color: rgba(155, 93, 23, .2);
  box-shadow: 0 22px 58px rgba(78, 56, 29, .12);
}

html[data-theme="light"] .story-card-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(155, 93, 23, .1), transparent 32%),
    linear-gradient(145deg, rgba(255, 253, 248, .9), rgba(238, 230, 216, .62));
}

html[data-theme="light"] .story-symbol::before,
html[data-theme="light"] .story-card-art::before {
  filter:
    drop-shadow(0 1px 1px rgba(94, 55, 13, .3))
    drop-shadow(0 12px 24px rgba(78, 56, 29, .1));
}

html[data-theme="light"] .story-symbol::after,
html[data-theme="light"] .story-card-art::after {
  border-color: rgba(155, 93, 23, .1);
}

html[data-theme="light"] .fact-strip {
  background: rgba(255, 253, 248, .97);
}

html[data-theme="light"] .cta-band {
  background: linear-gradient(110deg, #eee3d3, #faf6ef 62%);
}

html[data-theme="light"] .contact-card.primary {
  background: linear-gradient(135deg, rgba(166, 103, 29, .12), var(--bg-card));
  border-color: rgba(166, 103, 29, .25);
}

html[data-theme="light"] .gallery-caption {
  color: #f7f3eb;
  background: linear-gradient(to top, rgba(20, 18, 15, .86), transparent);
}

html[data-theme="light"] .footer-logo-image,
html[data-theme="light"] .footer-brand-logo {
  filter: drop-shadow(0 2px 2px rgba(62, 42, 20, .18));
}

@media (max-width: 620px) {
  nav .lang-toggle { display: none; }
  .nav-right { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  body,
  nav,
  .mobile-menu,
  .music-bar,
  .gallery-section,
  .philosophy-card,
  .instrument-card,
  .why-card,
  .contact-section,
  .contact-item,
  .contact-cta-card,
  .fact-strip,
  .section-muted,
  .card,
  .detail-row,
  .contact-card,
  .notice,
  .cta-band,
  footer {
    transition-duration: .01ms !important;
  }
}