:root {
    /* Base (authoritative) */
    --bucket-complete: #00cc66;
    --bucket-incomplete: #cc3333;
    --bucket-notattempted: #30a1ec;
    --bucket-exempt: #000000;
    /* Derived surfaces (tints) */
    --bucket-complete-bg: #e6f9f0;
    --bucket-complete-border: #99e6c2;
    --bucket-incomplete-bg: #fbeaea;
    --bucket-incomplete-border: #efb3b3;
    --bucket-notattempted-bg: #e9f4fd;
    --bucket-notattempted-border: #bcdff7;
    --bucket-exempt-bg: #f0f0f0;
    --bucket-exempt-border: #d6d6d6;

    /* ── Player (Light theme — default) ── */
    --player-bg: #f0f0f0;
    --player-text: #111;
    --player-subheader-bg: #333;
    --player-subheader-text: #fff;
    --player-stem-text: #0097a7;
    --player-stem-font-style: italic;
    --player-option-bg: #fff;
    --player-option-border: #444;
    --player-option-text: #111;
    /* Accent (theme-invariant) */
    --player-accent: #00bcd4;
    --player-audio-played: #f5a623;
    --player-audio-upcoming: #00bcd4;
    --player-audio-highlight: #f5a623;
    /* Bars (question bar, toolbar, audio player) */
    --player-bar-bg: #e0e0e0;
    --player-bar-border: #bbb;
    /* Buttons */
    --player-btn-active-bg: #000;
    --player-btn-active-text: #fff;
    --player-btn-outline-border: #666;
    --player-btn-outline-text: #333;
}

/* ── Player (Dark theme) ── */
[data-theme="dark"] {
    --player-bg: #000;
    --player-text: #fff;
    --player-subheader-bg: #1a1a1a;
    --player-subheader-text: #fff;
    --player-stem-text: #fff;
    --player-stem-font-style: normal;
    --player-option-bg: #111;
    --player-option-border: #fff;
    --player-option-text: #fff;
    --player-bar-bg: #050505;
    --player-bar-border: #262626;
    --player-btn-active-bg: #fff;
    --player-btn-active-text: #000;
    --player-btn-outline-border: #aaa;
    --player-btn-outline-text: #ccc;
}