/* Palette ownership: site themes supply defaults, artist views may override accents. */
:root {
  --surface-rgb: 17, 21, 32;
  --neutral-rgb: 255, 255, 255;
  --accent-rgb: 29, 185, 84;
  --accent-foreground: #07090e;
}

:root[data-theme="neon"], :root[data-theme="japan"], :root[data-theme="fortune"] {
  --panel-dark: rgba(var(--surface-rgb), .96);
  --card-dark: rgba(var(--surface-rgb), .92);
  --border: rgba(var(--neutral-rgb), .14);
  --border-hover: rgba(var(--neutral-rgb), .25);
  --bg-gradient: radial-gradient(ellipse at 80% 15%, var(--theme-tint), transparent 65%), var(--bg-dark);
}

:root[data-theme="neon"] {
  color-scheme: dark;
  --bg-dark: #0c0718;
  --surface-rgb: 18, 12, 31;
  --neutral-rgb: 255, 255, 255;
  --accent-rgb: 202, 156, 255;
  --card-hover: #2a1b41;
  --field-dark: #100a1e;
  --field-hover: #201330;
  --accent: #ca9cff;
  --accent-fill: #ca9cff;
  --accent-hover: #e0c2ff;
  --accent-foreground: #180b28;
  --accent-glow: rgba(var(--accent-rgb), .25);
  --text-primary: #f8f3ff;
  --text-soft: #e1d4ef;
  --text-muted: #b7a5ce;
  --theme-tint: rgba(131, 38, 230, .12);
}

:root[data-theme="japan"] {
  color-scheme: light;
  --bg-dark: #faf7f2;
  --surface-rgb: 255, 252, 248;
  --card-dark: rgb(var(--surface-rgb));
  --neutral-rgb: 28, 23, 24;
  --accent-rgb: 179, 31, 46;
  --card-hover: #f2e6e3;
  --field-dark: #fffdfa;
  --field-hover: #f1eae4;
  --accent: #b31f2e;
  --accent-fill: #b31f2e;
  --accent-hover: #941827;
  --accent-foreground: #ffffff;
  --text-primary: #231c20;
  --text-soft: #493e43;
  --text-muted: #716168;
  --theme-tint: rgba(179, 31, 46, .06);
  --shadow-lg: 0 20px 40px rgba(40, 20, 25, .15);
}


:root[data-theme="fortune"] {
  color-scheme: dark;
  --bg-dark: #0d1012;
  --surface-rgb: 22, 25, 28;
  --neutral-rgb: 225, 231, 235;
  --accent-rgb: 231, 193, 106;
  --card-hover: #30302a;
  --field-dark: #111518;
  --field-hover: #23292d;
  --accent: #e7c16a;
  --accent-fill: #e7c16a;
  --accent-hover: #f7d994;
  --accent-foreground: #17130b;
  --accent-glow: rgba(var(--accent-rgb), .22);
  --text-primary: #f1f4f5;
  --text-soft: #d3dce1;
  --text-muted: #a7b3bc;
  --theme-tint: rgba(231, 193, 106, .09);
}

body {
  background: var(--bg-gradient);
}

/* Money wallpaper belongs only to the subscriber theme. */
:root[data-theme="fortune"] body { isolation: isolate; }
:root[data-theme="fortune"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(13, 16, 18, .84), rgba(13, 16, 18, .80)),
    url('/assets/themes/fortune-money.webp');
  background-size: cover;
  background-position: center;
}

:root[data-theme="japan"] body {
  background-color: var(--bg-dark);
  background-image: url('/assets/themes/japan-sun-tree.png'),
    radial-gradient(ellipse at 80% 15%, var(--theme-tint), transparent 65%);
  background-size: auto 100vh, auto;
  background-position: right top, left top;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
}

/* The wallpaper belongs behind every card, in every interaction state. */
:root[data-theme="japan"] .song-card,
:root[data-theme="japan"] .track-card,
:root[data-theme="japan"] .playlist-card,
:root[data-theme="japan"] .artist-card {
  background-color: var(--card-dark) !important;
}

@media (max-width: 700px) {
  :root[data-theme="japan"] body {
    background-size: auto 72vh, auto;
  }
}

.theme-picker { margin: 0; min-width: 0; padding: 4px; border: 0; }
.appearance-settings .theme-picker { margin: 0 10px 10px; }
.theme-picker legend { padding: 4px 4px 10px; font-size: 13px; font-weight: 700; }
.theme-options { display: grid; gap: 8px; }
.theme-option { position: relative; cursor: pointer; }
.theme-option input { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); accent-color: var(--accent); }
.theme-option-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 12px 8px 38px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-dark);
}
.theme-option input:checked + .theme-option-card { border-color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.theme-option input:focus-visible + .theme-option-card { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-option-card strong { display: block; font-size: 13px; }
.theme-option-card small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.theme-premium-badge {
  display: inline-block; margin-left: 6px; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-soft); font-size: 10px; font-weight: 600;
}
.theme-option input:disabled + .theme-option-card { border-style: dashed; cursor: not-allowed; }
.settings-popover { max-height: calc(100dvh - 110px); overflow-y: auto; }

/* Shared surfaces follow the selected palette. */
.music-header, .settings-popover, .notifications-panel, .account-dropdown,
.modal-dialog, .social-modal-dialog { background: rgba(var(--surface-rgb), .98); }
.topbar { background: linear-gradient(rgba(var(--surface-rgb), .96), rgba(var(--surface-rgb), 0)); }

/* Neutral filled controls need the inverse of primary text, independently of accents. */
.play-pause-btn, .play-button, .audio-toggle { color: var(--bg-dark); }
.play-pause-btn svg, .play-button svg, .audio-toggle svg { fill: currentColor; }
.play-pause-btn:hover, .play-button:hover, .audio-widget.playing .audio-toggle,
.android-update-actions a { color: var(--accent-foreground); }