:root,
[data-theme="light"] {
  color-scheme: light;

  --pink-950: #250012;
  --pink-900: #38001b;
  --pink-850: #4b0028;
  --pink-800: #650036;
  --pink-700: #9b0757;
  --pink-650: #b00963;
  --pink-600: #d50b78;
  --pink-500: #f10f88;
  --pink-450: #ff2e9a;
  --pink-400: #ff58ad;
  --pink-300: #ff8cc6;
  --pink-200: #ffc0dd;
  --pink-100: #ffe3f1;
  --pink-50: #fff4fa;

  --white: #ffffff;
  --ink: #24101c;
  --ink-soft: #513047;
  --muted: #7a5b70;
  --line: rgba(178, 0, 102, .16);
  --glass: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-dark: rgba(47, 0, 26, .54);
  --glass-border: rgba(255, 255, 255, .28);

  --shadow-soft: 0 22px 70px rgba(155, 7, 87, .14);
  --shadow-card: 0 20px 55px rgba(155, 7, 87, .18);
  --shadow-deep: 0 35px 110px rgba(79, 0, 42, .28);
  --glow: 0 0 42px rgba(255, 46, 154, .34);

  --theme-color: #f10f88;
  --body-bg: radial-gradient(circle at 6% 4%, rgba(255, 46, 154, .20), transparent 32vw), radial-gradient(circle at 93% 8%, rgba(255, 140, 198, .22), transparent 35vw), linear-gradient(180deg, var(--pink-50) 0%, #fff 34%, var(--pink-50) 100%);
  --body-grid-bg: linear-gradient(rgba(155, 7, 87, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 7, 87, .045) 1px, transparent 1px);
  --body-dots-bg: radial-gradient(rgba(255, 46, 154, .20) 1px, transparent 1px);

  --section-gradient-bg: radial-gradient(circle at 0% 15%, rgba(255, 46, 154, .20), transparent 34rem), radial-gradient(circle at 100% 30%, rgba(255, 192, 221, .30), transparent 38rem), linear-gradient(135deg, rgba(255, 244, 250, .92), rgba(255, 255, 255, .94));
  --section-deep-color: #fff;
  --section-deep-bg: radial-gradient(circle at 12% 18%, rgba(255, 46, 154, .35), transparent 32rem), radial-gradient(circle at 88% 28%, rgba(255, 140, 198, .20), transparent 34rem), linear-gradient(135deg, var(--pink-950), var(--pink-850) 50%, var(--pink-700));
  --section-split-bg: linear-gradient(90deg, rgba(255, 227, 241, .62) 0 50%, transparent 50% 100%), radial-gradient(circle at 80% 10%, rgba(255, 46, 154, .12), transparent 30rem);
  --hero-bg: linear-gradient(115deg, rgba(255, 244, 250, .92), rgba(255, 255, 255, .82) 42%, rgba(255, 227, 241, .85)), radial-gradient(circle at 84% 18%, rgba(255, 46, 154, .28), transparent 34rem), radial-gradient(circle at 6% 80%, rgba(255, 140, 198, .24), transparent 32rem);

  --header-bg: rgba(255, 244, 250, .76);
  --header-bg-scrolled: rgba(255, 244, 250, .88);
  --header-border: rgba(178, 0, 102, .12);
  --header-shadow: 0 10px 36px rgba(155, 7, 87, .10);

  --panel-border: rgba(178, 0, 102, .14);
  --card-border: rgba(178, 0, 102, .13);
  --control-border: rgba(178, 0, 102, .14);
  --nav-panel-bg: rgba(255, 255, 255, .92);
  --nav-active-bg: rgba(255, 46, 154, .09);
  --control-bg: rgba(255, 255, 255, .72);
  --control-shadow: 0 10px 26px rgba(155, 7, 87, .08);
  --surface-soft: rgba(255, 255, 255, .58);
  --surface-card: rgba(255, 255, 255, .72);
  --surface-card-strong: rgba(255, 255, 255, .82);
  --surface-shadow: 0 12px 34px rgba(155, 7, 87, .08);
  --button-ghost-bg: rgba(255, 255, 255, .68);
  --button-ghost-border: rgba(178, 0, 102, .18);
  --button-ghost-shadow: 0 14px 36px rgba(155, 7, 87, .10);

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  --card-accent-bg: radial-gradient(circle at 22% 0%, rgba(255, 46, 154, .16), transparent 34%), radial-gradient(circle at 100% 100%, rgba(255, 192, 221, .18), transparent 30%);
  --card-featured-bg: linear-gradient(155deg, rgba(255,255,255,.88), rgba(255,227,241,.58));
  --cta-bg: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .18), transparent 35%), linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,227,241,.76));
  --accent-card-bg: linear-gradient(135deg, rgba(255,227,241,.92), rgba(255,255,255,.78));
  --track-item-bg: rgba(255, 227, 241, .62);
  --pill-bg: rgba(255, 46, 154, .10);
  --media-card-bg: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,244,250,.58));
  --embed-bg: rgba(255,255,255,.7);
  --embed-border: rgba(178, 0, 102, .10);
  --youtube-fallback-bg: radial-gradient(circle at 100% 0%, rgba(255, 46, 154, .14), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,242,249,.72));
}

/* 2026-07-01 release-ready background polish */
:root,
[data-theme="light"] {
  --body-bg:
    radial-gradient(circle at 12% -8%, rgba(255, 46, 154, .18), transparent 34rem),
    radial-gradient(circle at 88% 6%, rgba(255, 192, 221, .28), transparent 38rem),
    radial-gradient(circle at 50% 112%, rgba(255, 46, 154, .10), transparent 42rem),
    linear-gradient(145deg, #fff7fc 0%, #fff0f8 36%, #ffffff 72%, #fff6fb 100%);
  --body-grid-bg:
    linear-gradient(rgba(155, 7, 87, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 7, 87, .035) 1px, transparent 1px);
  --body-dots-bg: radial-gradient(rgba(255, 46, 154, .16) 1px, transparent 1px);
  --section-gradient-bg: transparent;
  --section-split-bg: transparent;
  --release-card-bg:
    radial-gradient(circle at 0% 0%, rgba(255, 46, 154, .075), transparent 22rem),
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 244, 250, .66));
  --release-card-border: rgba(178, 0, 102, .16);
  --release-card-shadow: 0 22px 64px rgba(155, 7, 87, .12);
  --release-subcard-bg: rgba(255, 255, 255, .62);
}