/* Accent palettes are independent of neutral background modes. */
:root, :root[data-color="green"] {
    --palette-strong:#20664e;
    --palette-hover:#174c3a;
    --palette-light:#a7d9b5;
    --palette-light-hover:#bfeacb;
    --palette-pale:#dcedae;
}

:root[data-color="purple"] {
    --palette-strong:#7c3aed;
    --palette-hover:#6d28d9;
    --palette-light:#a78bfa;
    --palette-light-hover:#c4b5fd;
    --palette-pale:#ddd6fe;
    --palette-primary-bg:linear-gradient(135deg,#7c3aed,#6d28d9);
    --palette-primary-hover-bg:linear-gradient(135deg,#8b5cf6,#7c3aed);
    --palette-primary-ink:#fff;
}

:root[data-color="pink"] {
    --palette-strong:#be185d;
    --palette-hover:#9d174d;
    --palette-light:#f9a8d4;
    --palette-light-hover:#fce7f3;
    --palette-pale:#fce7f3;
}

:root[data-color="yellow"] {
    --palette-strong:#8a6700;
    --palette-hover:#6f5200;
    --palette-light:#facc15;
    --palette-light-hover:#fde047;
    --palette-pale:#fef9c3;
    --palette-primary-bg:#facc15;
    --palette-primary-hover-bg:#eab308;
    --palette-primary-ink:#422006;
    --palette-logo:#facc15;
    --palette-logo-ink:#422006;
    --palette-logo-arm:#854d0e;
}

:root[data-color="cyan"] {
    --palette-strong:#0e7490;
    --palette-hover:#155e75;
    --palette-light:#67e8f9;
    --palette-light-hover:#cffafe;
    --palette-pale:#cffafe;
}

:root, :root[data-theme="light"] {
    color-scheme:light;
    --ink:#202020;
    --muted:#626262;
    --paper:#f6f6f6;
    --card:#fff;
    --ui-line:#d6d6d6;
    --line-strong:#aaa;
    --line-soft:#e2e2e2;
    --surface-soft:#eee;
    --surface-raised:#e9e9e9;
    --surface-muted:#f1f1f1;
    --green:var(--palette-strong);
    --green-hover:var(--palette-hover);
    --button-ink:#fff;
    --success-bg:#ecfdf5;
    --success-ink:#166534;
    --success-border:#9bc5ab;
    --danger-bg:#fef2f2;
    --danger-ink:#991b1b;
    --danger-border:#d6a1a1;
    --warning-bg:#fffbeb;
    --warning-ink:#854d0e;
    --warning-border:#d5b25d;
    --info-bg:#eff6ff;
    --info-ink:#1e40af;
    --info-border:#9ab6df;
    --automatic-bg:#f5f3ff;
    --automatic-ink:#6d28d9;
    --automatic-border:#bfb0dd;
    --ui-shadow:rgba(0,0,0,.09);
    background:var(--paper);
    color:var(--ink);
}

:root:is([data-theme="gray"],[data-theme="dark"]), :root.admin-theme:not([data-theme]) {
    color-scheme:dark;
    --green:var(--palette-light);
    --green-hover:var(--palette-light-hover);
    --button-ink:#101010;
    --success-bg:#17382b;
    --success-ink:#99f6c2;
    --success-border:#436d59;
    --danger-bg:#3b2024;
    --danger-ink:#fda4af;
    --danger-border:#8e4e59;
    --warning-bg:#3c3020;
    --warning-ink:#fde68a;
    --warning-border:#877044;
    --info-bg:#1e2d43;
    --info-ink:#bfdbfe;
    --info-border:#536e94;
    --automatic-bg:#302441;
    --automatic-ink:#ddd6fe;
    --automatic-border:#75608e;
}

:root[data-theme="gray"] {
    --ink:#f5f5f5;
    --muted:#c4c4c4;
    --paper:#2b2b2b;
    --card:#383838;
    --ui-line:#606060;
    --line-strong:#858585;
    --line-soft:#4b4b4b;
    --surface-soft:#414141;
    --surface-raised:#464646;
    --surface-muted:#323232;
    --ui-shadow:rgba(0,0,0,.22);
}

:root[data-theme="dark"], :root.admin-theme:not([data-theme]) {
    --ink:#f4f4f4;
    --muted:#aaa;
    --paper:#101010;
    --card:#1c1c1c;
    --ui-line:#454545;
    --line-strong:#707070;
    --line-soft:#303030;
    --surface-soft:#262626;
    --surface-raised:#292929;
    --surface-muted:#171717;
    --ui-shadow:rgba(0,0,0,.36);
}

:root, :root[data-theme], :root.admin-theme:not([data-theme]) {
    --primary-bg:var(--palette-primary-bg,var(--green));
    --primary-hover-bg:var(--palette-primary-hover-bg,var(--green-hover));
    --primary-ink:var(--palette-primary-ink,var(--button-ink));
    --line:var(--ui-line);
    --accent:var(--green);
    --accent-bright:var(--green);
    --teal:var(--green);
    --panel:var(--card);
    --panel-strong:var(--surface-raised);
    --surface-hover:var(--surface-raised);
    --focus:var(--green);
    --danger:var(--danger-ink);
    --danger-soft:var(--danger-bg);
    --correct-bg:var(--success-bg);
    --success:var(--success-ink);
    --warning:var(--warning-ink);
    --badge-blue-bg:var(--info-bg);
    --badge-blue-ink:var(--info-ink);
    --badge-amber-bg:var(--warning-bg);
    --badge-amber-ink:var(--warning-ink);
    --badge-rose-bg:var(--automatic-bg);
    --badge-rose-ink:var(--automatic-ink);
}

/* Shared controls in page headers, active games and the contact form. */
.appearance-controls {display:inline-flex;flex:0 0 auto;align-items:center;gap:8px}
.theme-toggle {
    display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;
    width:44px;height:44px;padding:10px;border:1px solid var(--line);
    border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;
    line-height:1;touch-action:manipulation
}
.theme-toggle[hidden] {display:none}
[data-theme] .theme-toggle[hidden] {display:inline-flex!important;visibility:hidden}
.theme-toggle:hover {background:var(--surface-soft);border-color:var(--green)}
.theme-toggle:focus-visible {outline:3px solid var(--focus);outline-offset:4px}
.theme-toggle svg {flex-shrink:0;pointer-events:none}
.color-toggle {color:var(--green)}
.theme-toggle__sun,.theme-toggle__moon {display:none}
[data-theme="gray"] .theme-toggle__moon {display:block}
[data-theme="dark"] .theme-toggle__sun {display:block}
:is([data-theme="gray"],[data-theme="dark"]) .theme-toggle__gray {display:none}

/* The favicon is a separate, fixed green asset. */
:root .brand .brand-logo {color:var(--ink)}
.brand-logo .brand-mark {fill:var(--palette-logo,var(--palette-strong))}
.brand-logo .brand-stem {stroke:var(--palette-logo-ink,#fff)}
.brand-logo .brand-arm {stroke:var(--palette-logo-arm,var(--palette-pale))}

.site-header>.main-nav {margin-inline-start:auto}
.round-tools {display:flex;align-items:center;justify-content:flex-end;gap:8px}

@media (max-width:600px) {
    :root .site-header {gap:12px}
    .site-header>.brand {order:0;min-width:0;max-width:calc(100% - 160px)}
    .site-header>.brand .brand-logo {width:100%;height:auto;max-height:40px}
    .site-header>.main-nav {order:2;flex-basis:100%;margin-inline-start:0;flex-wrap:wrap}
    .music-admin-main-nav>.brand {order:0;min-width:0;max-width:calc(100% - 160px)}
    .music-admin-main-nav>.brand .brand-logo {width:100%;height:auto;max-height:36px}
    .music-admin-main-nav>a:not(.brand) {order:2}
    .round-tools {gap:5px}
    .round-tools .appearance-controls {gap:5px}
}