/* Shared dark / light tokens — html[data-theme] beats handoff :root */
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #101116;
  --panel: #16171d;
  --panel2: #1f2027;
  --line: #2b2d35;
  --ink: #e3e2e8;
  --muted: #c5c6d2;
  --faint: #8e909c;
  --gold: #b3c5ff;
  --gold2: #dbe1ff;
  --rust: #ffb59e;
  --teal: #b8c8da;
  --instr: #8e909c;
  --pc: #002366;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(0, 35, 102, 0.12);
  --topbar-bg: rgba(16, 17, 22, 0.82);
  --surface-glass: rgba(22, 23, 29, 0.92);
  --surface-card: rgba(22, 23, 29, 0.7);
  --surface-player: rgba(18, 19, 24, 0.97);
  --border-soft: rgba(255, 255, 255, 0.06);
  --nav-active: rgba(179, 197, 255, 0.14);
  --chip-active: rgba(179, 197, 255, 0.14);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f5f4f0;
  --panel: #ffffff;
  --panel2: #eceae4;
  --line: #d8d4ca;
  --ink: #1a1a22;
  --muted: #5c5c68;
  --faint: #8a8a96;
  --gold: #002366;
  --gold2: #1a3a6e;
  --rust: #b84a2a;
  --teal: #4a6078;
  --instr: #8a8a96;
  --pc: #002366;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.04);
  --topbar-bg: rgba(245, 244, 240, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.95);
  --surface-card: rgba(255, 255, 255, 0.92);
  --surface-player: rgba(255, 255, 255, 0.98);
  --border-soft: rgba(0, 0, 0, 0.08);
  --nav-active: rgba(0, 35, 102, 0.08);
  --chip-active: rgba(0, 35, 102, 0.08);
}

html,
body,
#root,
#root > div,
.appmain,
.wrap,
.milongas-app,
.milongas-app > .appmain,
.milongas-stage,
.milongas-dj-root,
.milongas-dj-wrap,
.milongas-tabs-host {
  background-color: var(--bg) !important;
  color: var(--ink);
}

html,
body,
#root,
#root > div,
.milongas-app {
  min-height: 100vh;
  width: 100%;
}

.topbar,
html[data-theme='light'] .topbar,
html[data-theme='dark'] .topbar {
  background: var(--topbar-bg) !important;
}

.sidenav {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

.navlink.active {
  background: var(--nav-active) !important;
  color: var(--gold) !important;
}

.tb-lang-btn.active {
  background: var(--chip-active) !important;
  border-color: var(--gold) !important;
}

/* Archive SPA — override handoff hardcoded dark glass */
html[data-theme='light'] .controls,
html[data-theme='light'] .card,
html[data-theme='light'] .tile,
html[data-theme='light'] .pmcard,
html[data-theme='light'] .vmodal,
html[data-theme='light'] .grp,
html[data-theme='light'] .rdpanel,
html[data-theme='light'] .libpanel,
html[data-theme='light'] .pickhead,
html[data-theme='light'] .chk,
html[data-theme='light'] .srctoggle,
html[data-theme='light'] .tablewrap,
html[data-theme='light'] .verify,
html[data-theme='light'] .lu,
html[data-theme='light'] .librecs,
html[data-theme='light'] .fb-row,
html[data-theme='light'] .ocard,
html[data-theme='light'] .plrow {
  background: var(--surface-card) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-lift) !important;
  color: var(--ink) !important;
}

html[data-theme='light'] .orchpick,
html[data-theme='light'] .lupick {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

html[data-theme='light'] #orchSel,
html[data-theme='light'] #yearSel {
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-lift) !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, var(--panel), var(--panel2)) !important;
}

html[data-theme='light'] #orchSel {
  border-left: 3px solid var(--rust) !important;
}

html[data-theme='light'] #yearSel {
  border-left: 3px solid var(--teal) !important;
}

html[data-theme='light'] #orchSel option,
html[data-theme='light'] #yearSel option {
  background: var(--panel) !important;
  color: var(--ink) !important;
}

html[data-theme='light'] .controls {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
}

html[data-theme='light'] .tablewrap {
  border-radius: 16px !important;
}

html[data-theme='light'] .tile {
  background: linear-gradient(180deg, var(--panel), var(--panel2)) !important;
  border-radius: 14px !important;
}

html[data-theme='light'] .player,
html[data-theme='light'] .botnav {
  background: var(--surface-player) !important;
  border-color: var(--line) !important;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme='light'] th {
  background: var(--panel2) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

html[data-theme='light'] td {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme='light'] input,
html[data-theme='light'] textarea,
html[data-theme='light'] .search input {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme='light'] select {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme='light'] button,
html[data-theme='light'] .reset {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
}

html[data-theme='light'] button:hover,
html[data-theme='light'] .reset:hover {
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}

html[data-theme='light'] .srctoggle button.on {
  background: var(--chip-active) !important;
  color: var(--gold) !important;
}

html[data-theme='light'] .playall {
  background: var(--pc) !important;
  color: #fff !important;
  border-color: var(--pc) !important;
}

html[data-theme='light'] .yt {
  background: #c9603f !important;
  color: #fff !important;
  border-color: #c9603f !important;
}

html[data-theme='light'] .sp,
html[data-theme='light'] .lk.sp {
  background: #1db954 !important;
  color: #fff !important;
}

html[data-theme='light'] .kicker,
html[data-theme='light'] .sect,
html[data-theme='light'] .orchpick label {
  color: var(--rust) !important;
}

html[data-theme='light'] .sub,
html[data-theme='light'] .ocount,
html[data-theme='light'] .muted {
  color: var(--muted) !important;
}

html[data-theme='light'] a,
html[data-theme='light'] .lk:not(.sp):not(.yt) {
  color: var(--gold) !important;
}

html[data-theme='light'] .pill {
  background: rgba(0, 35, 102, 0.08) !important;
  color: var(--rust) !important;
}

html[data-theme='light'] .ins {
  color: var(--teal) !important;
}

html[data-theme='light'] .pmcard,
html[data-theme='light'] .plmcard {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
}

html[data-theme='light'] .playall {
  box-shadow: none !important;
}

html[data-theme='light'] tr:hover td,
html[data-theme='light'] .rdrow:hover,
html[data-theme='light'] .librow:hover,
html[data-theme='light'] .tile:hover {
  background: rgba(0, 35, 102, 0.04) !important;
}

html[data-theme='light'] .mast h1,
html[data-theme='light'] .rdtitle,
html[data-theme='light'] .pmrec,
html[data-theme='light'] .pl-title,
html[data-theme='light'] .n {
  color: var(--ink) !important;
}

html[data-theme='light'] .navlink:hover {
  background: var(--panel2) !important;
  color: var(--ink) !important;
}

html[data-theme='dark'] .controls,
html[data-theme='dark'] th {
  /* keep handoff dark styling but ensure vars apply */
  color: var(--muted);
}

html[data-theme='light'] .dj-chip.on {
  background: var(--chip-active) !important;
}

html[data-theme='light'] .dj-vinyl-disc {
  background: radial-gradient(circle at 32% 28%, #3a3a42 0%, #222228 38%, #141418 72%, #0a0a0e 100%) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme='dark'] .dj-vinyl-disc {
  background: radial-gradient(circle at 32% 28%, #2a2a30 0%, #101014 38%, #050506 72%, #000 100%) !important;
}

/* DJ React leftovers that still use static dark fills */
html[data-theme='light'] .milongas-app [class*='css-'] {
  color-scheme: light;
}