/* PracticeKit themes — shared color-token vocabulary for the mobile-apps monorepo.
 *
 * The single source of truth for every app's palette. Lifted from
 * sports-officiating (the richest theme set: 12 themes, value-for-value) so the
 * apps can't drift apart. `:root` (no data-theme attribute) is Classic — the
 * light baseline; every other theme overrides ONLY tokens. Component CSS in each
 * app consumes these via var(--token); pair with js/theme.js for the switcher.
 *
 * Canonical source: packages/practice-kit/css/; each app symlinks it into
 * static/css/ (and, for the inline-template apps, @imports or inlines it).
 * Add an app-specific theme (e.g. Fretsy's "fretboard") by appending one more
 * [data-theme="…"] block — do not fork this file.
 */
    /* ── Theme tokens — the single source of truth for every page ──────────
       Default (:root, no data-theme attribute) is Classic: the original light
       green/blue look, value-for-value. Each theme overrides only tokens.
       Component styles in portal.html / quiz.html consume these via var(). */
    :root {
        --page-a: #e8f5e9;  --page-b: #e3f2fd;   /* body gradient ends */
        --surface: #ffffff;                       /* cards */
        --ink: #212121;      --ink-mid: #424242;  /* text, strongest -> softest */
        --ink-dim: #555;     --ink-soft: #666;
        --ink-faint: #8e8e8e; --ink-mute: #757575;
        --line: #e0e0e0;
        --accent: #2e7d32;   --accent-strong: #1b5e20;
        --accent-hover: #1b5e20; --on-accent: #ffffff;
        --info: #1976d2;     --info-strong: #1565c0;
        --q-bg: #e3f2fd;                          /* question box */
        --a-bg: #e8f5e9;     --a-border: #4caf50; /* answer box / drill banner */
        --opt-bg: #ffffff;   --opt-border: #cfd8dc;
        --opt-ink: #263238;  --opt-hover-bg: #f5faff;
        --warn-bg: #fff3e0;  --warn-border: #ffb74d; --warn-ink: #e65100;
        --danger: #c62828;
        --miss-bg: #fff8f8;  --miss-border: #ffcdd2;
        --chip-bg: rgba(255,255,255,.8); --chip-ink: #4a5b64;
        --panel: #ffffff;    --btn-soft: #eceff1;  /* feedback widget */
    }

    /* Powder Blue — the umpire's shirt: cool blue light, navy accent. */
    [data-theme="powder"] {
        --page-a: #e8f1f8;   --page-b: #dce9f4;
        --line: #dbe4ec;
        --accent: #1d5c96;   --accent-strong: #123f6a;
        --accent-hover: #174d80; --on-accent: #ffffff;
        --info: #2f74b8;     --info-strong: #275f99;
        --q-bg: #e4eef8;
        --a-bg: #e7f2ea;     --a-border: #58a06a;
        --opt-hover-bg: #eef5fb;
        --chip-bg: rgba(244,249,253,.85); --chip-ink: #4a5f74;
    }

    /* Dark — the evening field: green-cast charcoal, field-green accent. */
    [data-theme="dark"] {
        --page-a: #151b18;   --page-b: #111722;
        --surface: #1e2622;
        --ink: #e8eee9;      --ink-mid: #cfd8d1;
        --ink-dim: #adbab1;  --ink-soft: #a0aea5;
        --ink-faint: #7f8d85; --ink-mute: #8b9a91;
        --line: #33403a;
        --accent: #6abf6e;   --accent-strong: #8fd694;
        --accent-hover: #7ccb80; --on-accent: #0b150e;
        --info: #6fb3f2;     --info-strong: #9cc9f7;
        --q-bg: #17222f;
        --a-bg: #192a1e;     --a-border: #42794a;
        --opt-bg: #242d28;   --opt-border: #3b4841;
        --opt-ink: #dfe7e1;  --opt-hover-bg: #283845;
        --warn-bg: #2c2313;  --warn-border: #8a6420; --warn-ink: #f0b45c;
        --danger: #ef6a5f;
        --miss-bg: #2a1b1b;  --miss-border: #5c3434;
        --chip-bg: rgba(22,28,24,.85); --chip-ink: #a9b6ad;
        --panel: #242d28;    --btn-soft: #33403a;
    }

    /* Scoreboard — night game: deep navy, incandescent amber lettering. */
    [data-theme="scoreboard"] {
        --page-a: #101830;   --page-b: #0a101f;
        --surface: #161f38;
        --ink: #eef1fa;      --ink-mid: #d2d9ea;
        --ink-dim: #a8b3cc;  --ink-soft: #9aa6c1;
        --ink-faint: #7e8aa8; --ink-mute: #8c9ab8;
        --line: #2b3654;
        --accent: #ffb52e;   --accent-strong: #ffcf70;
        --accent-hover: #ffc24f; --on-accent: #241703;
        --info: #82aaff;     --info-strong: #a8c3ff;
        --q-bg: #121c33;
        --a-bg: #231d0d;     --a-border: #93701f;
        --opt-bg: #1b2540;   --opt-border: #33406a;
        --opt-ink: #e6eaf6;  --opt-hover-bg: #22304f;
        --warn-bg: #241d0f;  --warn-border: #8a6420; --warn-ink: #ffc94d;
        --danger: #ff7a70;
        --miss-bg: #2b1a20;  --miss-border: #5e3441;
        --chip-bg: rgba(13,19,38,.85); --chip-ink: #a7b2cc;
        --panel: #1b2540;    --btn-soft: #2b3654;
    }

    /* Midnight — plain dark, no tint: neutral charcoal, blue accent. */
    [data-theme="midnight"] {
        --page-a: #16181d;   --page-b: #101318;
        --surface: #1e2127;
        --ink: #e8eaee;      --ink-mid: #cdd2d9;
        --ink-dim: #aab1bb;  --ink-soft: #9aa2ad;
        --ink-faint: #7c8592; --ink-mute: #8b95a2;
        --line: #343a44;
        --accent: #5c9ce6;   --accent-strong: #8ebdf2;
        --accent-hover: #74acec; --on-accent: #0a1522;
        --info: #64b5f6;     --info-strong: #90caf9;
        --q-bg: #1a2230;
        --a-bg: #1c2a24;     --a-border: #4a7c59;
        --opt-bg: #262a31;   --opt-border: #3d434e;
        --opt-ink: #dfe3e9;  --opt-hover-bg: #2b3542;
        --warn-bg: #2b2413;  --warn-border: #8a6420; --warn-ink: #f0b45c;
        --danger: #ef6a5f;
        --miss-bg: #2a1d1f;  --miss-border: #5c3438;
        --chip-bg: rgba(18,20,25,.85); --chip-ink: #a9b0bb;
        --panel: #262a31;    --btn-soft: #343a44;
    }

    /* Stripes — the zebra: black and white, red only when it matters. */
    [data-theme="stripes"] {
        --page-a: #0f0f0f;   --page-b: #0a0a0a;
        --surface: #171717;
        --ink: #f2f2f2;      --ink-mid: #d8d8d8;
        --ink-dim: #b5b5b5;  --ink-soft: #a6a6a6;
        --ink-faint: #8a8a8a; --ink-mute: #969696;
        --line: #3a3a3a;
        --accent: #f2f2f2;   --accent-strong: #ffffff;
        --accent-hover: #ffffff; --on-accent: #111111;
        --info: #cfcfcf;     --info-strong: #e6e6e6;
        --q-bg: #141414;
        --a-bg: #1a231a;     --a-border: #6a8f6a;
        --opt-bg: #1c1c1c;   --opt-border: #444444;
        --opt-ink: #ededed;  --opt-hover-bg: #262626;
        --warn-bg: #262010;  --warn-border: #8a7a20; --warn-ink: #e8d44d;
        --danger: #ff6b6b;
        --miss-bg: #241416;  --miss-border: #5c3434;
        --chip-bg: rgba(15,15,15,.85); --chip-ink: #bdbdbd;
        --panel: #1c1c1c;    --btn-soft: #2b2b2b;
    }




    /* Sea Glass — cool mint light, deep teal accent. */
    [data-theme="seaglass"] {
        --page-a: #e7f5f2;   --page-b: #dbeff0;
        --surface: #fbfffe;
        --ink: #14302c;      --ink-mid: #2c4f4a;
        --ink-dim: #446662;  --ink-soft: #547471;
        --ink-faint: #789a96; --ink-mute: #688a86;
        --line: #d8eae7;
        --accent: #0e7c6b;   --accent-strong: #095a4d;
        --accent-hover: #0b6d5d; --on-accent: #ffffff;
        --info: #3a78b0;     --info-strong: #316495;
        --q-bg: #e4f0f8;
        --a-bg: #e2f2ec;     --a-border: #4faa93;
        --opt-bg: #fbfffe;   --opt-border: #cfe4e0;
        --opt-ink: #1c3833;  --opt-hover-bg: #eef8f5;
        --chip-bg: rgba(247,253,252,.85); --chip-ink: #446662;
        --panel: #fbfffe;    --btn-soft: #dfeeeb;
    }

    /* Sepia — the old scorebook: browns on parchment, olive second. */
    [data-theme="sepia"] {
        --page-a: #f2e9da;   --page-b: #e9dcc6;
        --surface: #faf4e8;
        --ink: #2e2417;      --ink-mid: #4c3f2c;
        --ink-dim: #675a44;  --ink-soft: #766952;
        --ink-faint: #968a72; --ink-mute: #867a62;
        --line: #e3d6bd;
        --accent: #6b4f2a;   --accent-strong: #4d3719;
        --accent-hover: #5c4321; --on-accent: #ffffff;
        --info: #706e30;     --info-strong: #5c5a26;
        --q-bg: #efe6cf;
        --a-bg: #ece4cd;     --a-border: #a08a52;
        --opt-bg: #faf4e8;   --opt-border: #d9ccae;
        --opt-ink: #352b1c;  --opt-hover-bg: #f3ecd9;
        --danger: #a33a2a;
        --miss-bg: #f2e2d8;  --miss-border: #d0a894;
        --chip-bg: rgba(248,242,230,.85); --chip-ink: #675a44;
        --panel: #faf4e8;    --btn-soft: #e7dcc4;
    }

    /* Rose — blush light, raspberry accent, violet second. */
    [data-theme="rose"] {
        --page-a: #fbecf2;   --page-b: #f7dde8;
        --surface: #fffafc;
        --ink: #331723;      --ink-mid: #55283c;
        --ink-dim: #744158;  --ink-soft: #825168;
        --ink-faint: #a3768c; --ink-mute: #93667c;
        --line: #efd9e2;
        --accent: #ad2a63;   --accent-strong: #811d49;
        --accent-hover: #9a2456; --on-accent: #ffffff;
        --info: #6a4ca8;     --info-strong: #584092;
        --q-bg: #f1eaf8;
        --a-bg: #f4e6ee;     --a-border: #a84a7f;
        --opt-bg: #fffafc;   --opt-border: #ecd3de;
        --opt-ink: #3a2230;  --opt-hover-bg: #fbeff5;
        --miss-bg: #fbe6e6;  --miss-border: #e0a8a8;
        --chip-bg: rgba(255,250,252,.85); --chip-ink: #744158;
        --panel: #fffafc;    --btn-soft: #f2dfe8;
    }

    /* Violet — purple night, magenta second. */
    [data-theme="violet"] {
        --page-a: #191227;   --page-b: #120d1d;
        --surface: #221836;
        --ink: #ece6f8;      --ink-mid: #d4cbe8;
        --ink-dim: #b0a4cc;  --ink-soft: #a296c0;
        --ink-faint: #8478a4; --ink-mute: #9186b0;
        --line: #382b52;
        --accent: #a678f0;   --accent-strong: #c2a0f8;
        --accent-hover: #b58cf4; --on-accent: #180d2c;
        --info: #e678c0;     --info-strong: #f0a0d8;
        --q-bg: #201a38;
        --a-bg: #281f42;     --a-border: #7a5ab8;
        --opt-bg: #2a2145;   --opt-border: #443868;
        --opt-ink: #e2daf2;  --opt-hover-bg: #332856;
        --warn-bg: #2c2313;  --warn-border: #8a6420; --warn-ink: #f0b45c;
        --danger: #f07070;
        --miss-bg: #2e1a26;  --miss-border: #5e3450;
        --chip-bg: rgba(20,14,36,.85); --chip-ink: #aba0c8;
        --panel: #2a2145;    --btn-soft: #382b52;
    }

    /* Ember — charcoal and fire: warm dark, glowing orange. */
    [data-theme="ember"] {
        --page-a: #1c1210;   --page-b: #140c0a;
        --surface: #261815;
        --ink: #f4e8e2;      --ink-mid: #e0cfc6;
        --ink-dim: #c0a89c;  --ink-soft: #b2998c;
        --ink-faint: #94796c; --ink-mute: #a28a7c;
        --line: #45302a;
        --accent: #ff6b35;   --accent-strong: #ff8f60;
        --accent-hover: #ff7d4a; --on-accent: #2a0f00;
        --info: #ffb454;     --info-strong: #ffc87e;
        --q-bg: #281c11;
        --a-bg: #2a1c14;     --a-border: #a85a30;
        --opt-bg: #2e1f1a;   --opt-border: #4c352c;
        --opt-ink: #ecdcd4;  --opt-hover-bg: #38251e;
        --warn-bg: #2c2313;  --warn-border: #8a6420; --warn-ink: #f0b45c;
        --danger: #f43f5e;
        --miss-bg: #331418;  --miss-border: #63303a;
        --chip-bg: rgba(24,14,11,.85); --chip-ink: #c0a89c;
        --panel: #2e1f1a;    --btn-soft: #45302a;
    }

    /* Neon — blacktop and electric cyan, magenta second. */
    [data-theme="neon"] {
        --page-a: #0c1116;   --page-b: #07090d;
        --surface: #12181f;
        --ink: #e6f6f8;      --ink-mid: #c4dee2;
        --ink-dim: #9cc0c6;  --ink-soft: #8cb2b8;
        --ink-faint: #6e9298; --ink-mute: #7ea4aa;
        --line: #24343c;
        --accent: #00e5cc;   --accent-strong: #5ff2e2;
        --accent-hover: #2eeed8; --on-accent: #002a24;
        --info: #ff4fa0;     --info-strong: #ff7fba;
        --q-bg: #101a24;
        --a-bg: #0f211d;     --a-border: #0a8a78;
        --opt-bg: #16212a;   --opt-border: #2c4048;
        --opt-ink: #d8ecef;  --opt-hover-bg: #1b2c36;
        --warn-bg: #262010;  --warn-border: #8a7a20; --warn-ink: #e8d44d;
        --danger: #ff5470;
        --miss-bg: #241218;  --miss-border: #5c2c3c;
        --chip-bg: rgba(9,13,17,.85); --chip-ink: #9cc0c6;
        --panel: #16212a;    --btn-soft: #24343c;
    }


/* Fretboard — Fretsy's identity: deep navy neck, cream-gold accent, indigo
   reveal. Added when Fretsy joined the monorepo; expressed in the shared
   token vocabulary above. */
[data-theme="fretboard"] {
    --page-a: #0e1a2b;   --page-b: #14263a;
    --surface: #16263a;
    --ink: #eaf1f8;      --ink-mid: #a9bccf;
    --ink-dim: #93a7ba;  --ink-soft: #8397a9;
    --ink-faint: #6f869b; --ink-mute: #7d8fa0;
    --line: #274056;
    --accent: #f6c453;   --accent-strong: #e7b23c;
    --accent-hover: #ffd465; --on-accent: #0b1120;
    --info: #6672f0;     --info-strong: #5560e0;
    --q-bg: #16263a;
    --a-bg: #163527;     --a-border: #2f8f5b;
    --opt-bg: #16263a;   --opt-border: #274056;
    --opt-ink: #eaf1f8;  --opt-hover-bg: #1b3049;
    --warn-bg: #33261a;  --warn-border: #eaa46a; --warn-ink: #eaa46a;
    --danger: #ef5a5a;
    --miss-bg: #2a1a1a;  --miss-border: #5b2b2b;
    --chip-bg: rgba(20,38,58,.8); --chip-ink: #a9bccf;
    --panel: #16263a;    --btn-soft: #1b3049;
}

/* Felt — Blackjack's identity: green casino baize, chip-gold accent. Added when
   blackjack became the first app to consume the shared theme picker. */
[data-theme="felt"] {
    --page-a: #12513c;   --page-b: #0a2c22;
    --surface: #10493768; --panel: #10493768;
    --ink: #eaf5ee;      --ink-mid: #cfe3d7;
    --ink-dim: #b6d3c3;  --ink-soft: #9ec4b2;
    --ink-faint: #7fae99; --ink-mute: #8fbaa6;
    --line: #1f5c47;
    --accent: #f5c451;   --accent-strong: #ffd674;
    --accent-hover: #ffd674; --on-accent: #2a2000;
    --info: #6fd0b0;     --info-strong: #9fe3cc;
    --q-bg: #0e3d2e;
    --a-bg: #123f30;     --a-border: #43d17e;
    --opt-bg: #0e3d2e;   --opt-border: #1f5c47;
    --opt-ink: #eaf5ee;  --opt-hover-bg: #14513c;
    --warn-bg: #34301a;  --warn-border: #a98a3a; --warn-ink: #f5c451;
    --danger: #f8746b;
    --miss-bg: #351f1f;  --miss-border: #5c3232;
    --chip-bg: rgba(14,61,46,.8); --chip-ink: #9ec4b2;
    --btn-soft: #14513c;
}

/* Baize — Bridge Quiz's identity: classic card-table green, warm brass accent.
   Added when bridge joined the monorepo; a touch lighter and cooler than
   blackjack's "felt" so the two sibling apps read distinctly. */
[data-theme="baize"] {
    --page-a: #14614a;   --page-b: #0c3d2e;
    --surface: #0f4a3768; --panel: #0f4a3768;
    --ink: #ecf6f0;      --ink-mid: #d0e5d9;
    --ink-dim: #b4d3c5;  --ink-soft: #9cc6b3;
    --ink-faint: #7cae99; --ink-mute: #8dbaa6;
    --line: #226a52;
    --accent: #e7b84e;   --accent-strong: #f6cd6e;
    --accent-hover: #f2c860; --on-accent: #2a2000;
    --info: #6fd0b0;     --info-strong: #9fe3cc;
    --q-bg: #0e4535;
    --a-bg: #124a39;     --a-border: #3fbf7e;
    --opt-bg: #0e4535;   --opt-border: #226a52;
    --opt-ink: #ecf6f0;  --opt-hover-bg: #145a45;
    --warn-bg: #34301a;  --warn-border: #a98a3a; --warn-ink: #e7b84e;
    --danger: #f8746b;
    --miss-bg: #351f1f;  --miss-border: #5c3232;
    --chip-bg: rgba(15,74,55,.8); --chip-ink: #9cc6b3;
    --btn-soft: #145a45;
}

/* Slate — Notary Quiz's identity: deep navy, blue primary. Added when notary
   became a shared-theme consumer. */
[data-theme="slate"] {
    --page-a: #0b1120;   --page-b: #0b1120;
    --surface: #131c31;  --panel: #131c31;
    --ink: #e6edf7;      --ink-mid: #cdd8ea;
    --ink-dim: #aebdd6;  --ink-soft: #93a4c3;
    --ink-faint: #6f819c; --ink-mute: #8091ad;
    --line: #223154;
    --accent: #3b82f6;   --accent-strong: #5a97f8;
    --accent-hover: #2f6fe0; --on-accent: #ffffff;
    --info: #60a5fa;     --info-strong: #93c5fd;
    --q-bg: #0e1626;
    --a-bg: #10241a;     --a-border: #16a34a;
    --opt-bg: #0e1626;   --opt-border: #223154;
    --opt-ink: #e6edf7;  --opt-hover-bg: #14203a;
    --warn-bg: #2c2413;  --warn-border: #8a6a20; --warn-ink: #f0c05c;
    --danger: #dc2626;
    --miss-bg: #2a1717;  --miss-border: #5c2b2b;
    --chip-bg: rgba(14,22,38,.85); --chip-ink: #93a4c3;
    --btn-soft: #14203a;
}