@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --pink-950: #fff0f8;
    --pink-900: #ffe0ef;
    --pink-850: #ffcde5;
    --pink-800: #ffb8da;
    --pink-700: #ff8cc6;
    --pink-650: #ff6db8;
    --pink-600: #ff4ca7;
    --pink-500: #ff2e9a;
    --pink-450: #f10f88;
    --pink-400: #d50b78;
    --pink-300: #b00963;
    --pink-200: #7c0a49;
    --pink-100: #3a1025;
    --pink-50: #170711;

    --white: #14070f;
    --ink: #fff6fb;
    --ink-soft: #f1cddd;
    --muted: #c59aac;
    --line: rgba(255, 88, 173, .22);
    --glass: rgba(31, 10, 22, .68);
    --glass-strong: rgba(36, 12, 26, .86);
    --glass-dark: rgba(255, 192, 221, .16);
    --glass-border: rgba(255, 140, 198, .22);

    --shadow-soft: 0 22px 70px rgba(0, 0, 0, .30);
    --shadow-card: 0 20px 55px rgba(0, 0, 0, .38);
    --shadow-deep: 0 35px 110px rgba(0, 0, 0, .55);
    --glow: 0 0 42px rgba(255, 46, 154, .26);

    --theme-color: #14070f;
    --body-bg: radial-gradient(circle at 6% 4%, rgba(255, 46, 154, .18), transparent 32vw), radial-gradient(circle at 93% 8%, rgba(255, 140, 198, .12), transparent 35vw), linear-gradient(180deg, #12070d 0%, #070407 42%, #180812 100%);
    --body-grid-bg: linear-gradient(rgba(255, 88, 173, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 88, 173, .06) 1px, transparent 1px);
    --body-dots-bg: radial-gradient(rgba(255, 88, 173, .16) 1px, transparent 1px);

    --section-gradient-bg: radial-gradient(circle at 0% 15%, rgba(255, 46, 154, .18), transparent 34rem), radial-gradient(circle at 100% 30%, rgba(255, 192, 221, .10), transparent 38rem), linear-gradient(135deg, rgba(28, 8, 20, .94), rgba(10, 5, 9, .96));
    --section-deep-color: #fff;
    --section-deep-bg: radial-gradient(circle at 12% 18%, rgba(255, 46, 154, .24), transparent 32rem), radial-gradient(circle at 88% 28%, rgba(255, 140, 198, .12), transparent 34rem), linear-gradient(135deg, #160611, #220817 50%, #4d092f);
    --section-split-bg: linear-gradient(90deg, rgba(58, 16, 37, .45) 0 50%, transparent 50% 100%), radial-gradient(circle at 80% 10%, rgba(255, 46, 154, .12), transparent 30rem);
    --hero-bg: linear-gradient(115deg, rgba(24, 8, 17, .94), rgba(10, 5, 9, .88) 42%, rgba(45, 13, 31, .86)), radial-gradient(circle at 84% 18%, rgba(255, 46, 154, .20), transparent 34rem), radial-gradient(circle at 6% 80%, rgba(255, 140, 198, .13), transparent 32rem);

    --header-bg: rgba(15, 6, 12, .76);
    --header-bg-scrolled: rgba(15, 6, 12, .91);
    --header-border: rgba(255, 88, 173, .16);
    --header-shadow: 0 10px 36px rgba(0, 0, 0, .34);

    --panel-border: rgba(255, 88, 173, .18);
    --card-border: rgba(255, 88, 173, .16);
    --control-border: rgba(255, 88, 173, .18);
    --nav-panel-bg: rgba(24, 8, 17, .94);
    --nav-active-bg: rgba(255, 46, 154, .16);
    --control-bg: rgba(28, 10, 20, .78);
    --control-shadow: 0 10px 26px rgba(0, 0, 0, .25);
    --surface-soft: rgba(30, 10, 22, .62);
    --surface-card: rgba(28, 10, 20, .76);
    --surface-card-strong: rgba(36, 12, 26, .88);
    --surface-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    --button-ghost-bg: rgba(28, 10, 20, .78);
    --button-ghost-border: rgba(255, 88, 173, .22);
    --button-ghost-shadow: 0 14px 36px rgba(0, 0, 0, .24);

    --card-bg: linear-gradient(180deg, rgba(34, 11, 25, .86), rgba(20, 8, 15, .70));
    --card-accent-bg: radial-gradient(circle at 22% 0%, rgba(255, 46, 154, .13), transparent 34%), radial-gradient(circle at 100% 100%, rgba(255, 192, 221, .08), transparent 30%);
    --card-featured-bg: linear-gradient(155deg, rgba(42, 12, 29, .90), rgba(28, 8, 20, .76));
    --cta-bg: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .15), transparent 35%), linear-gradient(135deg, rgba(34, 11, 25, .90), rgba(21, 8, 16, .78));
    --accent-card-bg: linear-gradient(135deg, rgba(58, 16, 37, .78), rgba(24, 8, 17, .76));
    --track-item-bg: rgba(58, 16, 37, .58);
    --pill-bg: rgba(255, 46, 154, .15);
    --media-card-bg: linear-gradient(145deg, rgba(34, 11, 25, .86), rgba(19, 7, 14, .76));
    --embed-bg: rgba(17, 7, 13, .82);
    --embed-border: rgba(255, 88, 173, .16);
    --youtube-fallback-bg: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .14), transparent 34%), linear-gradient(145deg, rgba(34, 11, 25, .90), rgba(18, 7, 14, .78));
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --pink-950: #fff0f8;
  --pink-900: #ffe0ef;
  --pink-850: #ffcde5;
  --pink-800: #ffb8da;
  --pink-700: #ff8cc6;
  --pink-650: #ff6db8;
  --pink-600: #ff4ca7;
  --pink-500: #ff2e9a;
  --pink-450: #f10f88;
  --pink-400: #d50b78;
  --pink-300: #b00963;
  --pink-200: #7c0a49;
  --pink-100: #3a1025;
  --pink-50: #170711;

  --white: #14070f;
  --ink: #fff6fb;
  --ink-soft: #f1cddd;
  --muted: #c59aac;
  --line: rgba(255, 88, 173, .22);
  --glass: rgba(31, 10, 22, .68);
  --glass-strong: rgba(36, 12, 26, .86);
  --glass-dark: rgba(255, 192, 221, .16);
  --glass-border: rgba(255, 140, 198, .22);

  --shadow-soft: 0 22px 70px rgba(0, 0, 0, .30);
  --shadow-card: 0 20px 55px rgba(0, 0, 0, .38);
  --shadow-deep: 0 35px 110px rgba(0, 0, 0, .55);
  --glow: 0 0 42px rgba(255, 46, 154, .26);

  --theme-color: #14070f;
  --body-bg: radial-gradient(circle at 6% 4%, rgba(255, 46, 154, .18), transparent 32vw), radial-gradient(circle at 93% 8%, rgba(255, 140, 198, .12), transparent 35vw), linear-gradient(180deg, #12070d 0%, #070407 42%, #180812 100%);
  --body-grid-bg: linear-gradient(rgba(255, 88, 173, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 88, 173, .06) 1px, transparent 1px);
  --body-dots-bg: radial-gradient(rgba(255, 88, 173, .16) 1px, transparent 1px);

  --section-gradient-bg: radial-gradient(circle at 0% 15%, rgba(255, 46, 154, .18), transparent 34rem), radial-gradient(circle at 100% 30%, rgba(255, 192, 221, .10), transparent 38rem), linear-gradient(135deg, rgba(28, 8, 20, .94), rgba(10, 5, 9, .96));
  --section-deep-color: #fff;
  --section-deep-bg: radial-gradient(circle at 12% 18%, rgba(255, 46, 154, .24), transparent 32rem), radial-gradient(circle at 88% 28%, rgba(255, 140, 198, .12), transparent 34rem), linear-gradient(135deg, #160611, #220817 50%, #4d092f);
  --section-split-bg: linear-gradient(90deg, rgba(58, 16, 37, .45) 0 50%, transparent 50% 100%), radial-gradient(circle at 80% 10%, rgba(255, 46, 154, .12), transparent 30rem);
  --hero-bg: linear-gradient(115deg, rgba(24, 8, 17, .94), rgba(10, 5, 9, .88) 42%, rgba(45, 13, 31, .86)), radial-gradient(circle at 84% 18%, rgba(255, 46, 154, .20), transparent 34rem), radial-gradient(circle at 6% 80%, rgba(255, 140, 198, .13), transparent 32rem);

  --header-bg: rgba(15, 6, 12, .76);
  --header-bg-scrolled: rgba(15, 6, 12, .91);
  --header-border: rgba(255, 88, 173, .16);
  --header-shadow: 0 10px 36px rgba(0, 0, 0, .34);

  --panel-border: rgba(255, 88, 173, .18);
  --card-border: rgba(255, 88, 173, .16);
  --control-border: rgba(255, 88, 173, .18);
  --nav-panel-bg: rgba(24, 8, 17, .94);
  --nav-active-bg: rgba(255, 46, 154, .16);
  --control-bg: rgba(28, 10, 20, .78);
  --control-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  --surface-soft: rgba(30, 10, 22, .62);
  --surface-card: rgba(28, 10, 20, .76);
  --surface-card-strong: rgba(36, 12, 26, .88);
  --surface-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  --button-ghost-bg: rgba(28, 10, 20, .78);
  --button-ghost-border: rgba(255, 88, 173, .22);
  --button-ghost-shadow: 0 14px 36px rgba(0, 0, 0, .24);

  --card-bg: linear-gradient(180deg, rgba(34, 11, 25, .86), rgba(20, 8, 15, .70));
  --card-accent-bg: radial-gradient(circle at 22% 0%, rgba(255, 46, 154, .13), transparent 34%), radial-gradient(circle at 100% 100%, rgba(255, 192, 221, .08), transparent 30%);
  --card-featured-bg: linear-gradient(155deg, rgba(42, 12, 29, .90), rgba(28, 8, 20, .76));
  --cta-bg: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .15), transparent 35%), linear-gradient(135deg, rgba(34, 11, 25, .90), rgba(21, 8, 16, .78));
  --accent-card-bg: linear-gradient(135deg, rgba(58, 16, 37, .78), rgba(24, 8, 17, .76));
  --track-item-bg: rgba(58, 16, 37, .58);
  --pill-bg: rgba(255, 46, 154, .15);
  --media-card-bg: linear-gradient(145deg, rgba(34, 11, 25, .86), rgba(19, 7, 14, .76));
  --embed-bg: rgba(17, 7, 13, .82);
  --embed-border: rgba(255, 88, 173, .16);
  --youtube-fallback-bg: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .14), transparent 34%), linear-gradient(145deg, rgba(34, 11, 25, .90), rgba(18, 7, 14, .78));
}

/* 2026-07-01: dark-theme hardening for legacy light surfaces.
   These rules keep all UI chrome inside the dark palette without touching the PHP templates. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ui-dark-fill: rgba(32, 10, 23, .78);
    --ui-dark-fill-soft: rgba(45, 13, 31, .58);
    --ui-dark-fill-strong: rgba(42, 12, 29, .90);
    --ui-dark-pill: rgba(255, 88, 173, .13);
    --ui-dark-pill-strong: rgba(255, 88, 173, .18);
    --ui-dark-border: rgba(255, 88, 173, .18);
    --ui-dark-border-soft: rgba(255, 88, 173, .12);
    --ui-dark-shadow: 0 16px 42px rgba(0, 0, 0, .28);
    --ui-dark-gradient: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .12), transparent 34%), linear-gradient(145deg, rgba(36, 12, 26, .88), rgba(18, 7, 14, .76));
    --ui-dark-gradient-soft: radial-gradient(circle at 0% 0%, rgba(255, 88, 173, .12), transparent 28%), linear-gradient(135deg, rgba(45, 13, 31, .74), rgba(26, 8, 18, .74));
  }
}

[data-theme="dark"] {
  --ui-dark-fill: rgba(32, 10, 23, .78);
  --ui-dark-fill-soft: rgba(45, 13, 31, .58);
  --ui-dark-fill-strong: rgba(42, 12, 29, .90);
  --ui-dark-pill: rgba(255, 88, 173, .13);
  --ui-dark-pill-strong: rgba(255, 88, 173, .18);
  --ui-dark-border: rgba(255, 88, 173, .18);
  --ui-dark-border-soft: rgba(255, 88, 173, .12);
  --ui-dark-shadow: 0 16px 42px rgba(0, 0, 0, .28);
  --ui-dark-gradient: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .12), transparent 34%), linear-gradient(145deg, rgba(36, 12, 26, .88), rgba(18, 7, 14, .76));
  --ui-dark-gradient-soft: radial-gradient(circle at 0% 0%, rgba(255, 88, 173, .12), transparent 28%), linear-gradient(135deg, rgba(45, 13, 31, .74), rgba(26, 8, 18, .74));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) :is(
    .eyebrow,
    .filter-button,
    .blog-pill,
    .tag-list a,
    .meta-row,
    .timeline-item,
    .track-note,
    .release-grid__message,
    .article-cover,
    .article-gallery__item,
    .lyrics-block__section,
    .track-lyrics-button,
    .track-lyrics-empty,
    .lyrics-viewer-meta,
    .release-media-open-link,
    .discography-hub-card__meta
  ) {
    border-color: var(--ui-dark-border);
    background: var(--ui-dark-fill);
    color: var(--ink-soft);
    box-shadow: var(--ui-dark-shadow);
  }

  :root:not([data-theme]) :is(.eyebrow, .filter-button, .blog-pill, .tag-list a, .track-lyrics-button, .lyrics-viewer-meta, .release-media-open-link, .discography-hub-card__meta) {
    color: var(--pink-700);
  }

  :root:not([data-theme]) :is(.breadcrumbs--compact .breadcrumbs__list, .button--light) {
    border-color: var(--ui-dark-border);
    background: var(--ui-dark-pill);
    box-shadow: var(--ui-dark-shadow);
  }

  :root:not([data-theme]) .button--light {
    --btn-bg: var(--ui-dark-pill);
    --btn-color: var(--pink-700);
    --btn-border: var(--ui-dark-border);
  }

  :root:not([data-theme]) :is(.blog-sidebar__block--accent, .article-callout, .discography-hub-card, .release-media-fallback) {
    border-color: var(--ui-dark-border);
    background: var(--ui-dark-gradient);
    box-shadow: var(--ui-dark-shadow);
  }

  :root:not([data-theme]) :is(.track-item--has-lyrics, .track-item--no-lyrics) {
    border-color: var(--ui-dark-border-soft);
    background: var(--ui-dark-fill-soft);
  }

  :root:not([data-theme]) .track-item--has-lyrics.is-active {
    border-color: rgba(255, 88, 173, .30);
    background: var(--ui-dark-pill-strong);
    box-shadow: inset 0 0 0 1px rgba(255, 88, 173, .20), 0 16px 38px rgba(0, 0, 0, .24);
  }

  :root:not([data-theme]) :is(.cover-art, .blog-card__media--text) {
    background: radial-gradient(circle at 78% 16%, rgba(255, 192, 221, .16), transparent 18rem), linear-gradient(145deg, #220817, #4d092f 58%, #ff2e9a);
  }

  :root:not([data-theme]) .release-card__media::after {
    background: linear-gradient(180deg, rgba(24, 8, 17, .06), rgba(10, 5, 9, .88));
  }

  :root:not([data-theme]) :is(.image-modal__figure, .image-modal__img) {
    border-color: var(--ui-dark-border);
    background: var(--ui-dark-gradient);
  }
}

[data-theme="dark"] :is(
  .eyebrow,
  .filter-button,
  .blog-pill,
  .tag-list a,
  .meta-row,
  .timeline-item,
  .track-note,
  .release-grid__message,
  .article-cover,
  .article-gallery__item,
  .lyrics-block__section,
  .track-lyrics-button,
  .track-lyrics-empty,
  .lyrics-viewer-meta,
  .release-media-open-link,
  .discography-hub-card__meta
) {
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-fill);
  color: var(--ink-soft);
  box-shadow: var(--ui-dark-shadow);
}

[data-theme="dark"] :is(.eyebrow, .filter-button, .blog-pill, .tag-list a, .track-lyrics-button, .lyrics-viewer-meta, .release-media-open-link, .discography-hub-card__meta) {
  color: var(--pink-700);
}

[data-theme="dark"] :is(.breadcrumbs--compact .breadcrumbs__list, .button--light) {
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-pill);
  box-shadow: var(--ui-dark-shadow);
}

[data-theme="dark"] .button--light {
  --btn-bg: var(--ui-dark-pill);
  --btn-color: var(--pink-700);
  --btn-border: var(--ui-dark-border);
}

[data-theme="dark"] :is(.blog-sidebar__block--accent, .article-callout, .discography-hub-card, .release-media-fallback) {
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-gradient);
  box-shadow: var(--ui-dark-shadow);
}

[data-theme="dark"] :is(.track-item--has-lyrics, .track-item--no-lyrics) {
  border-color: var(--ui-dark-border-soft);
  background: var(--ui-dark-fill-soft);
}

[data-theme="dark"] .track-item--has-lyrics.is-active {
  border-color: rgba(255, 88, 173, .30);
  background: var(--ui-dark-pill-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 88, 173, .20), 0 16px 38px rgba(0, 0, 0, .24);
}

[data-theme="dark"] :is(.cover-art, .blog-card__media--text) {
  background: radial-gradient(circle at 78% 16%, rgba(255, 192, 221, .16), transparent 18rem), linear-gradient(145deg, #220817, #4d092f 58%, #ff2e9a);
}

[data-theme="dark"] .release-card__media::after {
  background: linear-gradient(180deg, rgba(24, 8, 17, .06), rgba(10, 5, 9, .88));
}

[data-theme="dark"] :is(.image-modal__figure, .image-modal__img) {
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-gradient);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-release-filters]:empty::before {
    border-color: var(--ui-dark-border);
    background: var(--ui-dark-fill);
    color: var(--ink-soft);
    box-shadow: var(--ui-dark-shadow);
  }
}

[data-theme="dark"] [data-release-filters]:empty::before {
  border-color: var(--ui-dark-border);
  background: var(--ui-dark-fill);
  color: var(--ink-soft);
  box-shadow: var(--ui-dark-shadow);
}

/* 2026-07-01 release-ready background polish */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --body-bg:
      radial-gradient(circle at 10% -8%, rgba(255, 46, 154, .18), transparent 34rem),
      radial-gradient(circle at 88% 8%, rgba(255, 140, 198, .11), transparent 42rem),
      radial-gradient(circle at 50% 118%, rgba(124, 10, 73, .26), transparent 48rem),
      linear-gradient(145deg, #160711 0%, #090407 42%, #130711 72%, #070305 100%);
    --body-grid-bg:
      linear-gradient(rgba(255, 88, 173, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 88, 173, .045) 1px, transparent 1px);
    --body-dots-bg: radial-gradient(rgba(255, 88, 173, .12) 1px, transparent 1px);
    --section-gradient-bg: transparent;
    --section-split-bg: transparent;
    --release-card-bg:
      radial-gradient(circle at 0% 0%, rgba(255, 46, 154, .10), transparent 24rem),
      linear-gradient(145deg, rgba(28, 8, 20, .88), rgba(10, 5, 9, .76));
    --release-card-border: rgba(255, 88, 173, .18);
    --release-card-shadow: 0 24px 72px rgba(0, 0, 0, .30);
    --release-subcard-bg: rgba(47, 13, 31, .58);
  }
}

[data-theme="dark"] {
  --body-bg:
    radial-gradient(circle at 10% -8%, rgba(255, 46, 154, .18), transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(255, 140, 198, .11), transparent 42rem),
    radial-gradient(circle at 50% 118%, rgba(124, 10, 73, .26), transparent 48rem),
    linear-gradient(145deg, #160711 0%, #090407 42%, #130711 72%, #070305 100%);
  --body-grid-bg:
    linear-gradient(rgba(255, 88, 173, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 88, 173, .045) 1px, transparent 1px);
  --body-dots-bg: radial-gradient(rgba(255, 88, 173, .12) 1px, transparent 1px);
  --section-gradient-bg: transparent;
  --section-split-bg: transparent;
  --release-card-bg:
    radial-gradient(circle at 0% 0%, rgba(255, 46, 154, .10), transparent 24rem),
    linear-gradient(145deg, rgba(28, 8, 20, .88), rgba(10, 5, 9, .76));
  --release-card-border: rgba(255, 88, 173, .18);
  --release-card-shadow: 0 24px 72px rgba(0, 0, 0, .30);
  --release-subcard-bg: rgba(47, 13, 31, .58);
}