/* Tutte le scelte cromatiche di AulaQuiz vivono qui.
   I componenti consumano token semantici; non contengono palette proprie.
   :root è il tema originale e funziona anche senza JavaScript.
   Per aggiungere un tema: un blocco data-theme e una voce in theme.js. */
:root {
  color-scheme: dark;
  --bg: #070b22;
  --text: #f4f6ff;
  --muted: #a6add6;
  --faint: var(--muted);
  --brand-1: #8b5cff;
  --brand-2: #ff5ca8;
  --accent-2: var(--brand-2);
  --brand-grad: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  --on-brand: #ffffff;
  --on-answer: #ffffff;
  --on-feedback: #ffffff;
  --on-destructive: #ffffff;
  --answer-border: transparent;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.11);
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.30);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --logo-shadow: 0 8px 24px rgba(139, 92, 255, 0.5);
  --card-filter: blur(18px) saturate(1.2);
  --header-bg: rgba(7, 11, 34, 0.72);
  --table-header-bg: rgba(7, 11, 34, 0.9);
  --sticky-bg: #12132b;
  --join-panel-bg: #242326;
  --join-control-bg: #302e32;
  --progress-bg: var(--sticky-bg);
  --progress-current: #ff3030;
  --player-notice-bg: #ffda7a;
  --player-notice-ink: #3b2600;
  --player-notice-border: #bc7600;
  --input-bg: rgba(0, 0, 0, 0.25);
  /* Menu nativi: tinte opache anche quando il browser apre la listbox. */
  --select-bg: #20263e;
  --select-ink: var(--text);
  --select-selected-bg: #514078;
  --select-selected-ink: #ffffff;
  --placeholder: rgba(255, 255, 255, 0.4);
  --list-bg: rgba(0, 0, 0, 0.22);
  --option-bg: rgba(0, 0, 0, 0.18);
  --hover-bg: rgba(255, 255, 255, 0.05);
  --quiet-fill: rgba(255, 255, 255, 0.06);
  --selection-bg: color-mix(in srgb, var(--brand-1) 26%, transparent);
  --focus-ring: color-mix(in srgb, var(--brand-1) 25%, transparent);
  --scroll-thumb: #596078;
  --scroll-hover: #78829b;
  --modal-bg: linear-gradient(145deg, #20203e, #10152e);
  --modal-backdrop: rgba(3, 6, 22, 0.78);
  --modal-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  --modal-mark: #c6b4ff;
  --modal-mark-bg: color-mix(in srgb, var(--brand-1) 18%, transparent);
  --danger-mark: #ffb1b9;
  --danger-mark-bg: color-mix(in srgb, var(--bad) 16%, transparent);
  --destructive-bg: linear-gradient(120deg, #b82c49, #b62d64);
  --toast-bg: rgba(20, 10, 40, 0.92);
  --preview-marker: #bc9fff;
  --code-bg: rgba(0, 0, 0, 0.3);
  /* Report: superfici opache, indipendenti dai bagliori dello sfondo. */
  --report-bg: #151a35;
  --report-head-bg: #1e2640;
  --report-hover-bg: #252d49;
  --report-track-bg: #353e5a;
  --report-detail-fill: #252d49;
  --report-correct-bg: #17392f;
  --report-correct-fill: #20483b;
  --report-incorrect-bg: #402333;
  --report-selected-bg: #312751;
  --report-selected-ink: #d6c5ff;
  --report-outline: #8992ba;
  --report-on-answer: #070b22;
  /* Correzione: tessere spente e dischi neutri per i segni di esito. */
  --solution-bg: var(--report-bg);
  --solution-ink: var(--muted);
  --solution-border: var(--report-outline);
  --solution-positive: var(--good);
  --solution-negative: var(--outcome-bad-bg);
  --solution-negative-marker-bg: #ffffff;
  --solution-marker-bg: var(--report-bg);
  --solution-count-bg: var(--report-detail-fill);
  --outcome-good-bg: #176b48;
  --outcome-bad-bg: #dc2626;
  --outcome-ink: #ffffff;
  /* Grafici indipendenti dalle tessere: i temi chiari richiedono tinte sature. */
  --chart-0: var(--ans-0);
  --chart-1: var(--ans-1);
  --chart-2: var(--ans-2);
  --chart-3: var(--ans-3);
  --chart-4: var(--ans-4);
  --chart-5: var(--ans-5);
  --chart-good: var(--good);
  --chart-bad: var(--bad);
  --chart-warning: var(--warning);
  --chart-outline: var(--report-outline);
  --chart-ink: var(--report-on-answer);

  /* Risposte: triangolo, rombo, cerchio, quadrato, stella, esagono. */
  --ans-0: #e94b5a;
  --ans-1: #2f6bff;
  --ans-2: #f4a51c;
  --ans-3: #22a06b;
  --ans-4: #8b5cff;
  --ans-5: #159cae;
  --answer-bottom-mix: 82%;
  --answer-shade: #000000;
  --answer-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  --glyph-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  --answer-count-bg: rgba(0, 0, 0, 0.35);
  --check-bg: rgba(0, 0, 0, 0.18);
  --check-mark: #15171f;
  --timer-track: rgba(255, 255, 255, 0.14);
  --good: #22c98b;
  --bad: #ff5d6c;
  --warning: #f4a51c;
  --warning-fill: linear-gradient(90deg, #ff5d6c, #ff9a3c);
  --success-fill: linear-gradient(180deg, #22c98b, #14915f);
  --error-fill: linear-gradient(180deg, #ff5d6c, #c5303f);
  --success-shadow: 0 16px 40px rgba(34, 201, 139, 0.45);
  --error-shadow: 0 16px 40px rgba(255, 93, 108, 0.4);
  --leader-fill: linear-gradient(90deg, rgba(139, 92, 255, 0.26), rgba(255, 92, 168, 0.08));
  --rank-gold: #f4c60a;
  --rank-silver: #cdd6e6;
  --rank-bronze: #e0985a;
  --podium-gold: linear-gradient(180deg, #f4c60a, #b8930a);
  --podium-silver: linear-gradient(180deg, #cdd6e6, #8b93a6);
  --podium-bronze: linear-gradient(180deg, #e0985a, #a86a34);
  --podium-text: rgba(0, 0, 0, 0.55);
  --podium-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  --qr-paper: #ffffff;

  --page-decoration:
    radial-gradient(60vmax 60vmax at 12% 8%, rgba(139, 92, 255, 0.35), transparent 60%),
    radial-gradient(55vmax 55vmax at 88% 18%, rgba(255, 92, 168, 0.28), transparent 60%),
    radial-gradient(65vmax 65vmax at 70% 92%, rgba(47, 107, 255, 0.30), transparent 62%),
    radial-gradient(50vmax 50vmax at 20% 88%, rgba(34, 160, 107, 0.22), transparent 60%);
  --page-shade: radial-gradient(120vmax 120vmax at 50% -10%, transparent 40%, rgba(0, 0, 0, 0.55));
  --page-filter: saturate(1.1);
  --page-animation: auroraDrift 26s ease-in-out infinite alternate;
}

/* Originale: entrambi i segni risaltano su un disco nero. */
:root:not([data-theme]), :root[data-theme="original"] {
  --solution-marker-bg: #000000;
  --solution-negative-marker-bg: #000000;
  --solution-negative: #ff5757;
}

/* Carta: fondo caldo, superfici opache, accenti a tinta unita. */
:root[data-theme="paper"],
:root[data-theme="pastel"] {
  --progress-current: #d90000;
  --player-notice-bg: #fff0bf;
  --player-notice-ink: #623900;
  --player-notice-border: #b66b00;
  color-scheme: light;
  --bg: #f2eee5;
  --text: #202f30;
  --muted: #54615e;
  --brand-1: #175b60;
  --brand-2: #854c32;
  --brand-grad: var(--brand-1);
  --surface: #fffcf5;
  --surface-strong: #e5e6dc;
  --border: #c9ccc1;
  --border-strong: #7b8b85;
  --shadow: 0 8px 24px rgba(32, 47, 48, 0.08);
  --shadow-sm: 0 2px 8px rgba(32, 47, 48, 0.06);
  --logo-shadow: var(--shadow-sm);
  --card-filter: none;
  --header-bg: #f2eee5;
  --table-header-bg: #e5e6dc;
  --sticky-bg: var(--surface);
  --join-panel-bg: var(--surface);
  --join-control-bg: #f1ede4;
  --input-bg: var(--surface);
  --select-bg: var(--surface);
  --select-selected-bg: var(--report-selected-bg);
  --select-selected-ink: var(--text);
  --placeholder: var(--muted);
  --list-bg: var(--surface);
  --option-bg: var(--surface);
  --hover-bg: #e5e6dc;
  --quiet-fill: #e5e6dc;
  --selection-bg: #e0eae4;
  --focus-ring: color-mix(in srgb, var(--brand-1) 18%, transparent);
  --scroll-thumb: #7b8b85;
  --scroll-hover: #54615e;
  --modal-bg: var(--surface);
  --modal-backdrop: rgba(32, 47, 48, 0.48);
  --modal-mark: var(--brand-1);
  --modal-mark-bg: var(--selection-bg);
  --danger-mark: var(--bad);
  --danger-mark-bg: #f6e3dd;
  --destructive-bg: var(--bad);
  --toast-bg: var(--surface);
  --preview-marker: var(--brand-2);
  --code-bg: var(--surface-strong);
  --report-bg: var(--surface);
  --report-head-bg: var(--surface-strong);
  --report-hover-bg: var(--surface-strong);
  --report-track-bg: var(--surface-strong);
  --report-detail-fill: var(--surface-strong);
  --report-correct-bg: #e8f0e8;
  --report-correct-fill: #d8e8db;
  --report-incorrect-bg: #f7e5df;
  --report-selected-bg: var(--selection-bg);
  --report-selected-ink: var(--brand-1);
  --report-outline: var(--muted);
  --report-on-answer: #ffffff;
  --chart-0: #d53949;
  --chart-1: #2563dc;
  --chart-2: #b36f00;
  --chart-3: #00894b;
  --chart-4: #8552cc;
  --chart-5: #008384;
  --chart-good: var(--chart-3);
  --chart-bad: var(--chart-0);
  --chart-warning: var(--chart-2);
  --chart-outline: transparent;
  --chart-ink: #ffffff;
  --ans-0: #a04438;
  --ans-1: #365f79;
  --ans-2: #7c5c19;
  --ans-3: #42674b;
  --ans-4: #705375;
  --ans-5: #226b69;
  --answer-bottom-mix: 100%;
  --answer-hover-shadow: var(--shadow);
  --glyph-shadow: none;
  --timer-track: var(--border);
  --good: #28623f;
  --bad: #a13730;
  --warning: #7c5c19;
  --warning-fill: var(--bad);
  --success-fill: var(--good);
  --error-fill: var(--bad);
  --success-shadow: var(--shadow);
  --error-shadow: var(--shadow);
  --leader-fill: #e0eae4;
  --rank-gold: #785816;
  --rank-silver: #50606b;
  --rank-bronze: #854c32;
  --podium-gold: #d4bb7a;
  --podium-silver: #bcc6c6;
  --podium-bronze: #c69c7b;
  --podium-text: var(--text);
  --podium-text-shadow: none;
  --page-decoration: var(--bg);
  --page-shade: none;
  --page-filter: none;
  --page-animation: none;
}

/* Pastello: pesca, cielo, burro e salvia, con inchiostro scuro sulle risposte.
   Eredita le superfici opache del tema chiaro; gli accenti testuali restano scuri. */
:root[data-theme="pastel"] {
  --join-control-bg: #efebe6;
  --bg: #f6f3f8;
  --text: #303341;
  --muted: #595c6b;
  --brand-1: #655078;
  --brand-2: #466b66;
  --on-answer: #303341;
  --surface: #fffcff;
  --surface-strong: #e9e1ef;
  --border: #d0c8d8;
  --border-strong: #888595;
  --shadow: 0 8px 24px rgba(74, 63, 91, 0.07);
  --shadow-sm: 0 2px 8px rgba(74, 63, 91, 0.05);
  --header-bg: var(--bg);
  --table-header-bg: var(--surface-strong);
  --hover-bg: #e9e1ef;
  --quiet-fill: #e9e1ef;
  --selection-bg: #e2d8ee;
  --scroll-thumb: #888595;
  --scroll-hover: #655078;
  --modal-backdrop: rgba(48, 51, 65, 0.42);
  --danger-mark-bg: #f6dedb;
  --report-on-answer: var(--text);
  --ans-0: #efc4b9;
  --ans-1: #c1d9ed;
  --ans-2: #f0dfac;
  --ans-3: #c9dfc6;
  --ans-4: #dbcfec;
  --ans-5: #bddfd9;
  --answer-border: #6d6979;
  --answer-count-bg: rgba(255, 255, 255, 0.65);
  --check-bg: transparent;
  --check-mark: #ffffff;
  --good: #37644b;
  --bad: #9d454a;
  --warning: #795e21;
  --leader-fill: #e2d8ee;
  --rank-gold: #795e21;
  --rank-silver: #5e6171;
  --rank-bronze: #855740;
  --podium-gold: #f0dfac;
  --podium-silver: #cddde9;
  --podium-bronze: #efc4b9;
}

/* Lavagna: alternativa scura, senza bagliori o gradienti del marchio. */
:root[data-theme="blackboard"] {
  --solution-negative-marker-bg: var(--solution-marker-bg);
  --solution-negative: #ff6b6b;
  --join-panel-bg: var(--surface);
  --join-control-bg: #202823;
  --progress-current: #ff4040;
  --player-notice-bg: #edc66f;
  --player-notice-ink: #302100;
  --player-notice-border: #bc7600;
  --progress-bg: var(--bg);
  --bg: #1b2422;
  --text: #f3efdf;
  --muted: #b9c3b9;
  --brand-1: #e6bd65;
  --brand-2: #b7cdbd;
  --brand-grad: var(--brand-1);
  --on-brand: #1b2422;
  --surface: #25312d;
  --surface-strong: #34433b;
  --border: #536257;
  --border-strong: #829182;
  --logo-shadow: var(--shadow-sm);
  --card-filter: none;
  --header-bg: var(--bg);
  --table-header-bg: var(--surface);
  --sticky-bg: var(--surface);
  --input-bg: var(--bg);
  --select-bg: var(--surface);
  --select-selected-bg: var(--report-selected-bg);
  --select-selected-ink: var(--text);
  --placeholder: var(--muted);
  --list-bg: var(--bg);
  --option-bg: var(--bg);
  --hover-bg: var(--surface-strong);
  --quiet-fill: var(--surface-strong);
  --selection-bg: #3d4030;
  --scroll-thumb: #829182;
  --scroll-hover: #b9c3b9;
  --modal-bg: var(--surface);
  --modal-backdrop: rgba(12, 19, 16, 0.72);
  --modal-mark: var(--brand-1);
  --modal-mark-bg: var(--selection-bg);
  --danger-mark: #f1a18b;
  --danger-mark-bg: #4b332c;
  --destructive-bg: #9c4334;
  --toast-bg: var(--surface);
  --preview-marker: var(--brand-1);
  --code-bg: var(--bg);
  --report-bg: var(--surface);
  --report-head-bg: #34433b;
  --report-hover-bg: #34433b;
  --report-track-bg: #34433b;
  --report-detail-fill: #34433b;
  --report-correct-bg: #2b4232;
  --report-correct-fill: #344c39;
  --report-incorrect-bg: #4b332c;
  --report-selected-bg: var(--selection-bg);
  --report-selected-ink: var(--brand-1);
  --report-outline: #b9c3b9;
  --report-on-answer: #ffffff;
  --ans-0: #a04438;
  --ans-1: #365f79;
  --ans-2: #7c5c19;
  --ans-3: #42674b;
  --ans-4: #705375;
  --ans-5: #226b69;
  --answer-bottom-mix: 100%;
  --answer-hover-shadow: var(--shadow);
  --glyph-shadow: none;
  --timer-track: var(--border);
  --good: #a5d3a9;
  --bad: #f1a18b;
  --warning: #e6bd65;
  --warning-fill: var(--bad);
  --success-fill: #42674b;
  --error-fill: #a04438;
  --success-shadow: var(--shadow);
  --error-shadow: var(--shadow);
  --leader-fill: #3d4030;
  --rank-gold: #e6bd65;
  --rank-silver: #c4d0cb;
  --rank-bronze: #dba88c;
  --podium-gold: #d4bb7a;
  --podium-silver: #bcc6c6;
  --podium-bronze: #c69c7b;
  --podium-text: #1b2422;
  --podium-text-shadow: none;
  --page-decoration: var(--bg);
  --page-shade: none;
  --page-filter: none;
  --page-animation: none;
}