/* Light surfaces; original photography and video keep their natural colors. */
:root {
  color-scheme: light;
  --page: #ffffff;
  --surface: #f4f6f6;
  --ink: #172326;
  --muted: #526266;
  --line: #dce3e4;
  --cyan: #00d4df;
  --accent-ink: #006b73;
  --color-bd-neutral-inverse: var(--line);
  --color-bd-static-primary: var(--accent-ink);
}

html, body, main > section, .hero, .site-footer {
  background: var(--page);
  color: var(--ink);
}
::selection { background: #b7f3f1; color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline-color: var(--accent-ink);
}
.site-header {
  background: #fff;
  border-bottom-color: #e3e9e9;
  backdrop-filter: none;
}
.brand { color: var(--ink); }
.header-button, .primary-button, [data-cta] {
  background: var(--cyan);
  color: #002c31;
}
.header-button:hover, .primary-button:hover, [data-cta]:hover {
  background: #59e3e8;
  color: #002c31;
}

.hero > .container-fluid > div {
  background: #edf3f2;
  border-color: #e2e8e7;
}
.hero > .container-fluid > div::before {
  background: rgba(0,0,0,.55) !important;
}
.hero-title { color: #fff; max-width: 700px; }
.hero-description { color: #fff; max-width: 510px !important; }

/* Text tokens are scoped to plain surfaces, never to photo overlays. */
.feature-section, #devices, .stems-section, #community > .container-fluid > header, .faq-section, .site-footer {
  --color-t-neutral-inverse: var(--ink);
  --color-t-neutral-inverse-soft: var(--muted);
  --color-t-static-white: var(--ink);
  --color-t-static-white-soft: var(--muted);
  --color-b-static-white: var(--ink);
}
.feature-section .slide article > div:first-child {
  background: var(--surface) !important;
}
.feature-section .slide article > div:nth-child(2) { background: var(--surface); }
.feature-section h2, .feature-section h3, #devices h2,
.stems-section h2, #community header h2 { color: var(--ink); }
.feature-section p, .stems-section header p, #community header p { color: var(--muted); }
.feature-section .carousel-dot { background: #7b8f93; }
.feature-section .carousel-dot.is-current { background: var(--ink); }
.feature-section .carousel-arrow {
  background: #e4eaeb;
  color: var(--ink);
  border-color: #d1dcde;
}
.feature-section .carousel-arrow:hover { background: #d7e2e3; }

.stems-section > .container-fluid::before,
.stems-section > .container-fluid > div::before,
.stems-section > .container-fluid > div::after { display: none; }
.stems-section article > div:first-child {
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}
.stems-section article > div:first-child > div:first-child { background: #f8fafa; }
.stems-section #audio-play { background: var(--ink); color: #fff; }
.stems-section #audio-play svg { color: #fff; }
.stems-section #audio-play svg [fill]:not([fill="none"]) { fill: currentColor; }
.stems-section #audio-play.is-playing::before,
.stems-section #audio-play.is-playing::after { background: #fff; }
.waveform > svg path { stroke: #859ca0; }
.waveform .wave-progress path { stroke: #00878f; }
.stem-row { background: var(--surface); border-color: var(--line); }
.stem-row button { color: var(--muted); }
.stem-row button[data-audio-action="mute"],
.stem-row button[data-audio-action="solo"] { background: #e0e8e9; }
.stem-row button[aria-pressed="true"] { background: #b8f1ef; color: #004d54; }
.stem-row button[data-audio-action="toggle"][aria-pressed="true"] { color: #869597; }
.stem-row input { height: 28px; background: transparent; }
.stem-row input::before, .stem-row input::after { display: none; }
.stem-row input::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, #00878f 0 var(--range-value), #c5d2d4 var(--range-value) 100%);
}
.stem-row input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  box-sizing: border-box;
  background: #fff;
  border: 5px solid #00878f;
  outline: none;
}
.stem-row input::-moz-range-track { height: 4px; background: #c5d2d4; }
.stem-row input::-moz-range-progress { height: 4px; background: #00878f; }
.stem-row input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background: #fff;
  border: 5px solid #00878f;
  outline: none;
}
.audio-error { color: var(--muted); }
.count-section h2 { color: var(--muted); border-bottom-color: var(--ink); }
.artist-count { color: var(--ink); }

/* Retain the reference's dark photo treatments and award artwork. */
.artist-section, .award-section, #community article {
  --color-bd-neutral-inverse: #ffffff26;
}
.artist-section .slide, .award-section .slide, #community article { color: #fff; }
.artist-section .slide article > div:last-child { backdrop-filter: none; }
.artist-section :focus-visible, .award-section :focus-visible,
#community article:focus-visible { outline-color: var(--cyan); }

.faq-section { --color-primary-4: var(--accent-ink); scroll-margin-top: 88px; }
.faq-item, .faq-item:first-of-type { border-color: var(--line); }
.faq-question { color: var(--ink); }
.faq-question:hover, .faq-question[aria-expanded="true"] { color: var(--accent-ink); }
.faq-answer-content { color: var(--muted); }
.faq-answer a { color: var(--accent-ink); }
.site-footer { background: #f5f8f8; border-top-color: var(--line); }
.site-footer svg [fill="#fff"], .site-footer svg [fill="#ffffff"] { fill: var(--ink); }
.site-footer a:hover { color: var(--accent-ink); }
.site-footer [class*="before:bg"]::before,
.site-footer [class*="after:bg"]::after { display: none; }

@media (max-width: 1199px) {
  .hero-title { max-width: 610px; }
}
@media (max-width: 767px) {
  .feature-section .slide article > div:first-child {
    background: var(--surface) !important;
  }
}