/* =====================================================================
   Palettes. Loaded last. <html data-palette="…"> picks one; site.ts
   switches it and remembers it in localStorage ("bandsync.palette").
   "rehearsal" (warm amber) is the base in site.css and theme.css,
   so it needs no rules here. Studio teal is the default.
   Each palette has a light and a dark set. Selectors carry three
   classes/attributes so they beat site.css's light/dark rules.
   ===================================================================== */

/* ---- Studio teal: charcoal desk, teal meters, coral record light ---- */
@media (prefers-color-scheme: light) {
    :root[data-palette="studio"]:not([data-theme="dark"]) {
        --bg: #eef3f2; --bg-glow: rgba(20, 160, 140, .12);
        --surface: #fbfdfd; --surface-2: #e4ecea; --surface-3: #d6e2df;
        --text: #10201e; --muted: #4f6663; --border: #c9d8d5; --border-strong: #a9bfbb;
        --accent: #0d8a7a; --accent-strong: #0a6f62; --accent-ink: #f2fffc; --accent-soft: rgba(13, 138, 122, .12);
        --teal: #c9472a; --teal-soft: rgba(201, 71, 42, .12); --brass: #c7921a;
        --staff: rgba(20, 70, 65, .07); --glow: rgba(13, 138, 122, .38); --glow-soft: rgba(13, 138, 122, .14);
        --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -16px rgba(15, 50, 45, .3);
        --shadow-pop: 0 18px 48px -12px rgba(10, 35, 32, .4);
    }
}
:root[data-palette="studio"][data-theme="light"] {
    --bg: #eef3f2; --bg-glow: rgba(20, 160, 140, .12);
    --surface: #fbfdfd; --surface-2: #e4ecea; --surface-3: #d6e2df;
    --text: #10201e; --muted: #4f6663; --border: #c9d8d5; --border-strong: #a9bfbb;
    --accent: #0d8a7a; --accent-strong: #0a6f62; --accent-ink: #f2fffc; --accent-soft: rgba(13, 138, 122, .12);
    --teal: #c9472a; --teal-soft: rgba(201, 71, 42, .12); --brass: #c7921a;
    --staff: rgba(20, 70, 65, .07); --glow: rgba(13, 138, 122, .38); --glow-soft: rgba(13, 138, 122, .14);
    --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -16px rgba(15, 50, 45, .3);
    --shadow-pop: 0 18px 48px -12px rgba(10, 35, 32, .4);
}
@media (prefers-color-scheme: dark) {
    :root[data-palette="studio"]:not([data-theme="light"]) {
        --bg: #0e1213; --bg-glow: rgba(45, 212, 191, .09);
        --surface: #161c1e; --surface-2: #1d2528; --surface-3: #253033;
        --text: #e6eeee; --muted: #8fa3a5; --border: #253033; --border-strong: #34444a;
        --accent: #2dd4bf; --accent-strong: #5eead4; --accent-ink: #04201c; --accent-soft: rgba(45, 212, 191, .14);
        --teal: #ff7a59; --teal-soft: rgba(255, 122, 89, .14); --brass: #f5c542;
        --staff: rgba(160, 230, 225, .05); --glow: rgba(45, 212, 191, .5); --glow-soft: rgba(45, 212, 191, .13);
    }
}
:root[data-palette="studio"][data-theme="dark"] {
    --bg: #0e1213; --bg-glow: rgba(45, 212, 191, .09);
    --surface: #161c1e; --surface-2: #1d2528; --surface-3: #253033;
    --text: #e6eeee; --muted: #8fa3a5; --border: #253033; --border-strong: #34444a;
    --accent: #2dd4bf; --accent-strong: #5eead4; --accent-ink: #04201c; --accent-soft: rgba(45, 212, 191, .14);
    --teal: #ff7a59; --teal-soft: rgba(255, 122, 89, .14); --brass: #f5c542;
    --staff: rgba(160, 230, 225, .05); --glow: rgba(45, 212, 191, .5); --glow-soft: rgba(45, 212, 191, .13);
}
:root[data-palette="studio"] {
    --amp: #0c1011; --amp-hi: #1a2325; --amp-edge: #2a3538; --amp-text: #e3ecec; --amp-muted: #8a9c9e;
    --spark: #8ff5e6; --mark: #2dd4bf; --score-accent: #0d8a7a;
}

/* ---- Midnight stage: deep navy, violet and cyan stage lights ---- */
@media (prefers-color-scheme: light) {
    :root[data-palette="midnight"]:not([data-theme="dark"]) {
        --bg: #eef0fa; --bg-glow: rgba(100, 80, 230, .12);
        --surface: #fcfcff; --surface-2: #e5e8f6; --surface-3: #d8dcf0;
        --text: #141733; --muted: #565c82; --border: #cfd3ea; --border-strong: #b0b6d8;
        --accent: #5b3fe0; --accent-strong: #4a2fc7; --accent-ink: #f6f3ff; --accent-soft: rgba(91, 63, 224, .12);
        --teal: #0e8fa8; --teal-soft: rgba(14, 143, 168, .12); --brass: #d6336c;
        --staff: rgba(40, 45, 110, .07); --glow: rgba(91, 63, 224, .38); --glow-soft: rgba(91, 63, 224, .14);
        --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -16px rgba(30, 30, 90, .3);
        --shadow-pop: 0 18px 48px -12px rgba(20, 20, 70, .4);
    }
}
:root[data-palette="midnight"][data-theme="light"] {
    --bg: #eef0fa; --bg-glow: rgba(100, 80, 230, .12);
    --surface: #fcfcff; --surface-2: #e5e8f6; --surface-3: #d8dcf0;
    --text: #141733; --muted: #565c82; --border: #cfd3ea; --border-strong: #b0b6d8;
    --accent: #5b3fe0; --accent-strong: #4a2fc7; --accent-ink: #f6f3ff; --accent-soft: rgba(91, 63, 224, .12);
    --teal: #0e8fa8; --teal-soft: rgba(14, 143, 168, .12); --brass: #d6336c;
    --staff: rgba(40, 45, 110, .07); --glow: rgba(91, 63, 224, .38); --glow-soft: rgba(91, 63, 224, .14);
    --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -16px rgba(30, 30, 90, .3);
    --shadow-pop: 0 18px 48px -12px rgba(20, 20, 70, .4);
}
@media (prefers-color-scheme: dark) {
    :root[data-palette="midnight"]:not([data-theme="light"]) {
        --bg: #0b0d17; --bg-glow: rgba(124, 92, 255, .12);
        --surface: #141830; --surface-2: #1b2040; --surface-3: #232845;
        --text: #e8eaf6; --muted: #8a90b4; --border: #232845; --border-strong: #343b62;
        --accent: #9d86ff; --accent-strong: #b8a8ff; --accent-ink: #120a33; --accent-soft: rgba(157, 134, 255, .15);
        --teal: #22d3ee; --teal-soft: rgba(34, 211, 238, .14); --brass: #ff5c8a;
        --staff: rgba(170, 180, 255, .05); --glow: rgba(124, 92, 255, .55); --glow-soft: rgba(124, 92, 255, .15);
    }
}
:root[data-palette="midnight"][data-theme="dark"] {
    --bg: #0b0d17; --bg-glow: rgba(124, 92, 255, .12);
    --surface: #141830; --surface-2: #1b2040; --surface-3: #232845;
    --text: #e8eaf6; --muted: #8a90b4; --border: #232845; --border-strong: #343b62;
    --accent: #9d86ff; --accent-strong: #b8a8ff; --accent-ink: #120a33; --accent-soft: rgba(157, 134, 255, .15);
    --teal: #22d3ee; --teal-soft: rgba(34, 211, 238, .14); --brass: #ff5c8a;
    --staff: rgba(170, 180, 255, .05); --glow: rgba(124, 92, 255, .55); --glow-soft: rgba(124, 92, 255, .15);
}
:root[data-palette="midnight"] {
    --amp: #080a14; --amp-hi: #171c36; --amp-edge: #2a3058; --amp-text: #e3e6f7; --amp-muted: #858bb0;
    --spark: #b9f3ff; --mark: #9d86ff; --score-accent: #5b3fe0;
}

/* ---- Jacaranda: jacaranda purple and stage gold ---- */
@media (prefers-color-scheme: light) {
    :root[data-palette="jacaranda"]:not([data-theme="dark"]) {
        --bg: #f5f0f9; --bg-glow: rgba(140, 80, 200, .12);
        --surface: #fffcff; --surface-2: #ece4f3; --surface-3: #e0d5eb;
        --text: #22152e; --muted: #64527a; --border: #dacde7; --border-strong: #bfaed2;
        --accent: #7d3fc0; --accent-strong: #6a30a8; --accent-ink: #fbf5ff; --accent-soft: rgba(125, 63, 192, .12);
        --teal: #1f8a68; --teal-soft: rgba(31, 138, 104, .12); --brass: #c98a12;
        --staff: rgba(70, 40, 100, .07); --glow: rgba(125, 63, 192, .38); --glow-soft: rgba(125, 63, 192, .14);
        --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -16px rgba(60, 25, 90, .3);
        --shadow-pop: 0 18px 48px -12px rgba(45, 15, 70, .4);
    }
}
:root[data-palette="jacaranda"][data-theme="light"] {
    --bg: #f5f0f9; --bg-glow: rgba(140, 80, 200, .12);
    --surface: #fffcff; --surface-2: #ece4f3; --surface-3: #e0d5eb;
    --text: #22152e; --muted: #64527a; --border: #dacde7; --border-strong: #bfaed2;
    --accent: #7d3fc0; --accent-strong: #6a30a8; --accent-ink: #fbf5ff; --accent-soft: rgba(125, 63, 192, .12);
    --teal: #1f8a68; --teal-soft: rgba(31, 138, 104, .12); --brass: #c98a12;
    --staff: rgba(70, 40, 100, .07); --glow: rgba(125, 63, 192, .38); --glow-soft: rgba(125, 63, 192, .14);
    --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 28px -16px rgba(60, 25, 90, .3);
    --shadow-pop: 0 18px 48px -12px rgba(45, 15, 70, .4);
}
@media (prefers-color-scheme: dark) {
    :root[data-palette="jacaranda"]:not([data-theme="light"]) {
        --bg: #120d18; --bg-glow: rgba(164, 107, 222, .12);
        --surface: #1c1526; --surface-2: #241b31; --surface-3: #2e233d;
        --text: #f1eaf7; --muted: #a596b8; --border: #33264a; --border-strong: #46355f;
        --accent: #c08cf0; --accent-strong: #d6aefa; --accent-ink: #1f0b33; --accent-soft: rgba(192, 140, 240, .14);
        --teal: #4fd1a5; --teal-soft: rgba(79, 209, 165, .14); --brass: #f5b942;
        --staff: rgba(220, 190, 250, .05); --glow: rgba(164, 107, 222, .55); --glow-soft: rgba(164, 107, 222, .15);
    }
}
:root[data-palette="jacaranda"][data-theme="dark"] {
    --bg: #120d18; --bg-glow: rgba(164, 107, 222, .12);
    --surface: #1c1526; --surface-2: #241b31; --surface-3: #2e233d;
    --text: #f1eaf7; --muted: #a596b8; --border: #33264a; --border-strong: #46355f;
    --accent: #c08cf0; --accent-strong: #d6aefa; --accent-ink: #1f0b33; --accent-soft: rgba(192, 140, 240, .14);
    --teal: #4fd1a5; --teal-soft: rgba(79, 209, 165, .14); --brass: #f5b942;
    --staff: rgba(220, 190, 250, .05); --glow: rgba(164, 107, 222, .55); --glow-soft: rgba(164, 107, 222, .15);
}
:root[data-palette="jacaranda"] {
    --amp: #0d0912; --amp-hi: #20162c; --amp-edge: #382a4d; --amp-text: #efe6f7; --amp-muted: #a093b3;
    --spark: #ffe0a0; --mark: #c08cf0; --score-accent: #7d3fc0;
}

/* ---- The palette picker in the top bar ---- */
.palette-wrap { position: relative; }
.palette-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    color: var(--amp-muted);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
}
.palette-toggle:hover:not(:disabled), .palette-toggle[aria-expanded="true"] {
    color: var(--spark);
    border-color: color-mix(in srgb, var(--spark) 50%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--spark) 35%, transparent);
}
.palette-toggle:active:not(:disabled) { padding: 0; border-bottom-width: 1px; }
.palette-toggle svg { width: 18px; height: 18px; display: block; margin: auto; }
.palette-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    width: 250px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-pop);
    animation: palette-in .18s ease-out;
}
@keyframes palette-in { from { opacity: 0; transform: translateY(-6px); } }
.palette-menu p { margin: 4px 8px 8px; font-size: 13px; color: var(--muted); }
.palette-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}
.palette-option:hover:not(:disabled) { background: var(--surface-2); box-shadow: none; }
.palette-option:active:not(:disabled) { padding: 8px 10px; border-bottom-width: 1px; }
.palette-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.palette-option small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.palette-dots { display: flex; flex: none; }
.palette-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -4px; }
.palette-dots i:first-child { margin-left: 0; }