/* Theme-specific surfaces. The hero stays recognizably Melya in both modes,
   while the reading surfaces and app screenshots follow the selected theme. */
:root[data-theme="light"] .hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 34%, rgba(142, 104, 244, 0.22), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f4edff 62%, #eee7fa 100%);
}

:root[data-theme="light"] .hero-lead,
:root[data-theme="light"] .text-link,
:root[data-theme="light"] .hero-notes,
:root[data-theme="light"] .proof-strip {
  color: rgba(28, 24, 32, 0.72);
}

:root[data-theme="light"] .hero-orbit {
  border-color: rgba(28, 24, 32, 0.08);
}

:root[data-theme="light"] .proof-strip p {
  color: var(--ink);
}

:root[data-theme="light"] .brand,
:root[data-theme="light"] .site-nav,
:root[data-theme="light"] .menu-toggle,
:root[data-theme="light"] .theme-toggle {
  color: var(--ink);
}

:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .menu-toggle {
  background: rgba(28, 24, 32, 0.06);
  border-color: rgba(28, 24, 32, 0.1);
}

:root[data-theme="light"] .site-header.is-scrolled {
  border-color: rgba(28, 24, 32, 0.09);
  background: rgba(255, 253, 248, 0.88);
}

:root[data-theme="light"] .legal-page .site-header {
  border-color: rgba(28, 24, 32, 0.09);
  background: rgba(255, 253, 248, 0.92);
}

:root[data-theme="light"] .site-nav a:hover {
  color: var(--violet);
}

:root[data-theme="light"] .header-cta {
  color: white;
  background: var(--night);
}

:root[data-theme="dark"] .eyebrow.dark {
  color: var(--violet-light);
}

:root[data-theme="dark"] .recognition-list article,
:root[data-theme="dark"] .trust-card {
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .step-card-photo,
:root[data-theme="dark"] .week {
  background: #181221;
}

:root[data-theme="dark"] .step-card-action {
  background: #242033;
}

:root[data-theme="dark"] .step-card-action blockquote {
  color: var(--violet-light);
}

:root[data-theme="dark"] .accordion summary span {
  background: #2a2233;
}

:root[data-theme="dark"] .start-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .hero::after {
  background: var(--paper);
}