/* Shared foregrounds are resolved on the themed body, not inherited from :root. */
:root {
  --ink: #202737;
  --muted: #4d5564;
  --violet: #63417f;
  --orange: #9c4130;
  --line: #ccd1d7;
}
body { color: var(--ink); }
body.night {
  --ink: #f4f3fa;
  --muted: #c7ccda;
  --violet: #dec7f1;
  --orange: #f4b7a8;
  --line: #687185;
}

/* Supporting text should read clearly instead of fading into the cards. */
.scene-card small, .poster-caption small, .support-button:hover { opacity: 1; }
.scene-card small { font-size: 12px; line-height: 1.6; }
.channel-text small, .card-place, .feature-support p, .player-help,
.availability, .rescue-type, .giving-note p, .photo-caption,
.quote-assumptions p, .eco-small, .help-option small {
  font-size: 12px;
  line-height: 1.7;
}
.search-box input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.support-button:hover, .text-button:hover { text-decoration: underline; }

/* Every tinted surface has an explicit matching foreground in both themes. */
.scene-world { color: #56336f; }
.scene-kittens { color: #78382b; }
.scene-sanctuary { color: #275344; }
.postcard-caption small { color: #565064; }
.postcard-topline > span:last-child { color: #803d2c; }
.camera-card { --card-accent: #275948; }
.camera-card[data-tone=violet] { --card-accent: #5d3b7b; }
.camera-card[data-tone=peach] { --card-accent: #803c2f; }
.camera-card[data-tone=yellow] { --card-accent: #6b491c; }
.camera-card[data-tone=blue] { --card-accent: #315d75; }
.passport-stamp.collected[data-tone=mint] { color: #2c5948; }
.passport-stamp.collected[data-tone=yellow] { color: #6b4b1b; }
.passport-stamp.collected[data-tone=blue] { color: #305b78; }
body.night .button.surprise:hover { background: #5c4c2b; color: #fff0c5; }
.sound-description small, .volume-control { color: #365a70; }
.rain-toggle { color: #315469; }
.rain-toggle[aria-pressed=true], body.night .rain-toggle[aria-pressed=true] {
  background: #315b70;
  border-color: #315b70;
  color: #ffffff;
}
.kindness .eyebrow, .kindness-copy > p:last-child { color: #ebe5f4; }
.demo-heading .eco-title span { color: #9b3d39; }
body.night .demo-heading .eco-title span { color: #ffb8ae; }
.quote-panel .eyebrow { color: #254b44; }
body.night .quote-panel .eyebrow { color: #e4f5ed; }
.demo-error { color: #87252b; }
body.night .demo-error { color: #ffc3c7; }
body.night .collection-row button[aria-pressed=true] b {
  color: #302438;
  background: #efe1fa;
}

/* Image brightness must not decide whether a caption can be read. */
.poster-caption {
  background: #1b2230;
  color: #ffffff;
  border-radius: 10px;
  padding: 11px 14px;
  max-width: calc(100% - 50px);
}
.poster-caption small { color: #f0edf6; }
.postcard-location {
  background: #1b2230;
  color: #ffffff;
  padding: 7px 10px;
  border-radius: 7px;
  max-width: calc(100% - 32px);
}
.photo-caption { background: #1b2230; color: #ffffff; padding: 13px 18px; }
.postcard-play { background: #fffefa; color: #4e315f; }
.country-chip { background: #fffefa; color: #303444; }

/* Keep unavailable controls legible and use their border/cursor to mark state. */
body button:disabled { opacity: 1; cursor: not-allowed; }
body .button:disabled {
  background: var(--paper);
  color: var(--muted);
  border: 1px dashed var(--muted);
  box-shadow: none;
  transform: none;
}
@media (max-width: 600px) {
  .scene-card small { font-size: 11px; }
  .poster-caption { max-width: calc(100% - 30px); padding: 9px 11px; }
}