/* Theme tokens apply to the whole interface; vinyl artwork keeps its own colors. */
:root {
  --on-accent: #1a2116;
  --secondary: #e4a17b;
  --on-secondary: #1a2116;
  --card: linear-gradient(135deg, #252d21, #191f1a);
  --card-secondary: linear-gradient(135deg, #33271f, #211d19);
  --deck: linear-gradient(100deg, #262d21, #1b211c);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5ef; --surface: #ffffff; --ink: #242d24; --muted: #596154;
  --accent: #456027; --on-accent: #ffffff; --line: #d5d9cd; --orange: #a34d2e;
  --secondary: #8d482e; --on-secondary: #ffffff;
  --card: linear-gradient(135deg, #edf1e4, #ffffff);
  --card-secondary: linear-gradient(135deg, #f5e8df, #ffffff);
  --deck: linear-gradient(100deg, #e9eedf, #fdfdf9);
}
:root[data-theme="mocha"] {
  color-scheme: dark;
  --bg: #211b18; --surface: #302621; --ink: #f3e6d6; --muted: #c1aa98;
  --accent: #e3bb8c; --on-accent: #2c1d13; --line: #4e3e34; --orange: #d88b6b;
  --secondary: #d7a1a0; --on-secondary: #2b181b;
  --card: linear-gradient(135deg, #3b2d25, #2a211c);
  --card-secondary: linear-gradient(135deg, #3d2b2d, #2c2223);
  --deck: linear-gradient(100deg, #3a2d24, #2c241f);
}
:root[data-theme="terminal"] {
  color-scheme: dark;
  --bg: #080e09; --surface: #0c180e; --ink: #dafcdd; --muted: #90ba95;
  --accent: #70f18c; --on-accent: #061d0a; --line: #28482e; --orange: #b7e686;
  --secondary: #bbe688; --on-secondary: #14230a;
  --card: linear-gradient(135deg, #102415, #0a140c);
  --card-secondary: linear-gradient(135deg, #1b2911, #0d160b);
  --deck: linear-gradient(100deg, #112716, #0a170d);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
:root[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #0c1b2a; --surface: #142a3d; --ink: #e3f2f9; --muted: #9bb9cb;
  --accent: #80d9e1; --on-accent: #0c2934; --line: #2b455a; --orange: #e4ab7e;
  --secondary: #a6bbf3; --on-secondary: #182542;
  --card: linear-gradient(135deg, #163749, #102433);
  --card-secondary: linear-gradient(135deg, #263451, #142336);
  --deck: linear-gradient(100deg, #19394a, #122839);
}
:root[data-theme="sunset"] {
  color-scheme: light;
  --bg: #fff1e8; --surface: #fffaf5; --ink: #4b282c; --muted: #795354;
  --accent: #a5384c; --on-accent: #ffffff; --line: #e5c7ba; --orange: #b8522c;
  --secondary: #9e481d; --on-secondary: #ffffff;
  --card: linear-gradient(135deg, #fbe0d9, #fff8f2);
  --card-secondary: linear-gradient(135deg, #fbe4c8, #fff8ef);
  --deck: linear-gradient(100deg, #f7ddd4, #fff6ee);
}
:root[data-theme="lavender"] {
  color-scheme: light;
  --bg: #f5f1fb; --surface: #fffcff; --ink: #332944; --muted: #6d5b7c;
  --accent: #6a4ca0; --on-accent: #ffffff; --line: #ddd1e9; --orange: #ac527b;
  --secondary: #92517b; --on-secondary: #ffffff;
  --card: linear-gradient(135deg, #e9e0f6, #fdfaff);
  --card-secondary: linear-gradient(135deg, #f4e1ec, #fff9fd);
  --deck: linear-gradient(100deg, #e9def5, #faf5ff);
}

.header-actions { display: flex; align-items: center; gap: 18px; }
.brand-mark, .primary-button, .round-play, .station-art, .station-play, .art-sticker { color: var(--on-accent); }
.primary-button:hover, .station-play:hover, .round-play:hover { background: var(--accent); filter: brightness(1.08); }
.hero-tags, .feature-strip > div > span, .footer-brand { color: var(--muted); }
.hero-tags i { background: var(--muted); }
.station-card { background: var(--card); }
.station-card:nth-child(2) { background: var(--card-secondary); }
.station-card:nth-child(2) .station-number, .station-card:nth-child(2) .station-native { color: var(--secondary); }
.station-card:nth-child(2) .station-play { background: var(--secondary); color: var(--on-secondary); }
.station-card:nth-child(2)[data-active="true"] { border-color: var(--secondary); }
.station-panel { background: var(--deck); border-color: var(--line); }
.live-label { border-color: var(--line); }
:root[data-theme="terminal"] .eyebrow::before { content: ">"; }

@media (max-width: 900px) {
  .header-actions { gap: 10px; }
}
@media (max-width: 700px) {
  .site-header { height: auto; min-height: 86px; padding: 18px 0; flex-wrap: wrap; gap: 12px; }
  .site-header nav { display: none; }
  .header-actions { margin-left: auto; gap: 8px; }
}
.theme-bar{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding:13px 0}.theme-bar-label{font-size:8px;letter-spacing:1.6px;color:var(--muted);white-space:nowrap}.theme-options{display:flex;align-items:center;gap:5px;overflow-x:auto;padding:4px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.theme-choice{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:36px;padding:8px 12px;border:1px solid transparent;border-radius:20px;background:transparent;color:var(--muted);font:inherit;font-size:10px;cursor:pointer}.theme-choice:hover{background:var(--surface);color:var(--ink)}.theme-choice[aria-pressed=true]{border-color:var(--accent);background:var(--surface);color:var(--ink)}.theme-choice:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.theme-swatch{width:12px;height:12px;border-radius:50%;border:1px solid #7c817b;box-shadow:inset 0 0 0 2px #ffffff25}.theme-choice[data-set-theme=light] .theme-swatch{background:#f6f5ef}.theme-choice[data-set-theme=dark] .theme-swatch{background:#344334}.theme-choice[data-set-theme=mocha] .theme-swatch{background:#ad825c}.theme-choice[data-set-theme=terminal] .theme-swatch{background:#70f18c}.theme-choice[data-set-theme=ocean] .theme-swatch{background:#368fac}.theme-choice[data-set-theme=sunset] .theme-swatch{background:#e68371}.theme-choice[data-set-theme=lavender] .theme-swatch{background:#b29bdc}.volume-control button[aria-pressed=true]{opacity:.5}
:root[data-theme=terminal] :is(.station-card,.station-panel,.primary-button,.station-play,.share-button,.theme-choice){border-radius:2px}
@media(max-width:700px){.theme-bar{gap:10px;padding:9px 0}.theme-bar-label{font-size:7px;letter-spacing:1px}.theme-options{gap:2px}.theme-choice{min-height:44px;padding:9px 10px}}