/* Shared public-site palette. The 3D scene keeps its own UI stylesheet. */
html { color-scheme: light; }
.menu-toggle { color: var(--ink); }
html[data-loading-theme="dark"] {
  --ivory: #211c25;
  --paper: #2d2630;
  --ink: #f1e6d7;
  --muted: #c5b7aa;
  --gold: #c8aa74;
  --line: #61515a;
  --red: #f0b2a0;
  --soft: #39313b;
  color-scheme: dark;
}
html[data-loading-theme="dark"] body { background: var(--ivory); color: var(--ink); }
html[data-loading-theme="dark"] ::selection { background: #665044; color: #fff3df; }
html[data-loading-theme="dark"] :is(.site-header, .music-lines, .music-lines a) { border-color: var(--line); }
html[data-loading-theme="dark"] :is(.eyebrow, .hero-copy .eyebrow, .hero-caption, .hero-scroll, .lyric-verse h3) { color: var(--gold); }
html[data-loading-theme="dark"] .hero:after {
  background: linear-gradient(90deg,#211c25f5 0%,#211c25dd 21%,#211c2580 40%,transparent 65%),
              linear-gradient(0deg,var(--ivory),transparent 17%);
}
html[data-loading-theme="dark"] .cloud-veil { background: radial-gradient(ellipse at 30% 100%,#b4976530,transparent 68%); }
html[data-loading-theme="dark"] :is(.feature-card, .supporter-card, .music-stage) { background: linear-gradient(140deg,var(--paper),var(--soft)); }
html[data-loading-theme="dark"] .feature-card:after { color: #c8aa7420; }
html[data-loading-theme="dark"] :is(.quiet-band, .note, .track[aria-current="true"]) { background: var(--soft); }
html[data-loading-theme="dark"] :is(.prayer-card, .lyric-song, .recovery-box, .skip) { background: var(--paper); color: var(--ink); }
html[data-loading-theme="dark"] .lyric-song:nth-of-type(2n) { background: var(--soft); }
html[data-loading-theme="dark"] :is(.form-grid input, .form-grid select, .form-grid textarea, .recovery-box code, .slot-grid button) {
  background: var(--ivory); color: var(--ink); border-color: var(--line);
}
html[data-loading-theme="dark"] :is(input, select, textarea, audio) { color-scheme: dark; }
html[data-loading-theme="dark"] :is(input, textarea)::placeholder { color: #b5a79d; opacity: 1; }
html[data-loading-theme="dark"] .status.error { color: #f3aa9d; }
html[data-loading-theme="dark"] .text-link { border-color: var(--gold); }
html[data-loading-theme="dark"] .button { background: #a95643; border-color: #c8836b; color: #fffaf0; }
html[data-loading-theme="dark"] .button:hover { background: #bc654e; }
html[data-loading-theme="dark"] :is(.button.secondary, .button.ghost) { background: var(--paper); color: var(--ink); border-color: var(--gold); }
html[data-loading-theme="dark"] :is(.button.secondary, .button.ghost):hover { background: var(--soft); }
html[data-loading-theme="dark"] .slot-grid button[aria-pressed="true"] { background: #a95643; color: #fffaf0; border-color: #c8836b; }
html[data-loading-theme="dark"] .slot-grid button:disabled { background: #39313b; color: #b9aaa2; }
html[data-loading-theme="dark"] .chant-button {
  background: radial-gradient(circle,#57432f,#342936);
  border-color: var(--gold); color: #f5dcad;
  box-shadow: 0 0 0 12px #c8aa7414,0 0 0 13px #c8aa7440;
}
html[data-loading-theme="dark"] .chant-button:active { box-shadow: 0 0 0 18px #c8aa7414; }
html[data-loading-theme="dark"] :is(.world-invite-image, .world-invite-image span) { background: var(--paper); color: var(--muted); }
html[data-loading-theme="dark"] .guide-contents a:hover { background: var(--soft); }
html[data-loading-theme="dark"] :is(.guide-figure figcaption, .guide-feature-copy>p:not(.guide-roman), .guide-landscape-head>p:last-child, .guide-landscape-list p, .guide-after) { color: var(--muted); }
html[data-loading-theme="dark"] :is(.guide-feature .guide-roman, .guide-small-no) { color: var(--gold); }
html[data-loading-theme="dark"] .guide-entry:hover { color: var(--red); border-color: var(--red); }
html[data-loading-theme="dark"] .guide-landscapes { background: linear-gradient(160deg,var(--paper),var(--soft)); border-color: var(--line); }
html[data-loading-theme="dark"] :is(.guide-landscape-list, .guide-landscape-list li) { border-color: var(--line); }
html[data-loading-theme="dark"] .submission-bottom button { background: #a95643; color: #fffaf0; }
@media (max-width:780px) {
  html[data-loading-theme="dark"] .hero:after { background: linear-gradient(0deg,var(--ivory) 27%,#211c25f0 34%,transparent 57%); }
}