/* tokens.css — palette e componenti di Bussola.
   Cartoon moderno: colori pieni e luminosi, contorni morbidi, poche ombre,
   niente gradienti. Contrasti testo/fondo ≥ 4.5:1 (verificati in
   tests/test_accessibilita.py). Tema scuro: prefers-color-scheme + data-tema. */
:root {
  --sole: #ffc93c;
  --sole-scuro: #b07800;
  --mare: #1b6ca8;
  --mare-chiaro: #d9ecfa;
  --corallo: #e8574a;
  --corallo-scuro: #b8352a;
  --menta: #3fbf9b;
  --menta-scuro: #1e7a60;
  --lilla: #8e7cc3;
  --notte: #1d2433;

  --fondo: #fff8ec;
  --superficie: #ffffff;
  --superficie-2: #fdeccd;
  --testo: #1d2433;
  --testo-tenue: #4a5468;
  --bordo: #1d2433;
  --accento: #1b6ca8;
  --accento-testo: #ffffff;
  --pericolo: #b8352a;
  --fuoco: #e8574a;

  --raggio: 18px;
  --raggio-piccolo: 12px;
  --tratto: 2.5px;
  --ombra: 0 4px 0 rgba(29, 36, 51, .18);
  --font: "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-titoli: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --spazio: 16px;
  --larghezza: 960px;
  color-scheme: light;
}

:root[data-tema="scuro"] {
  --fondo: #141a26;
  --superficie: #1f2738;
  --superficie-2: #2a3448;
  --testo: #f3f5fa;
  --testo-tenue: #c3cad8;
  --bordo: #0b0f17;
  --accento: #ffc93c;
  --accento-testo: #1d2433;
  --mare-chiaro: #22344d;
  --pericolo: #ff8a7e;
  --ombra: 0 4px 0 rgba(0, 0, 0, .4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --fondo: #141a26;
    --superficie: #1f2738;
    --superficie-2: #2a3448;
    --testo: #f3f5fa;
    --testo-tenue: #c3cad8;
    --bordo: #0b0f17;
    --accento: #ffc93c;
    --accento-testo: #1d2433;
    --mare-chiaro: #22344d;
    --pericolo: #ff8a7e;
    --ombra: 0 4px 0 rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

/* ── componenti ─────────────────────────────────────────────── */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .6em 1.3em;
  font: 800 1.05rem/1.2 var(--font); color: var(--accento-testo);
  background: var(--accento); border: var(--tratto) solid var(--bordo);
  border-radius: 999px; box-shadow: var(--ombra); cursor: pointer;
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(2px); box-shadow: none; }
.bottone.secondario { background: var(--superficie); color: var(--testo); }
.bottone.sole { background: var(--sole); color: var(--notte); }
.bottone.pericolo { background: var(--corallo-scuro); color: #fff; }
.bottone[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.carta {
  background: var(--superficie); color: var(--testo);
  border: var(--tratto) solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: var(--spazio);
}

.scelta {
  display: block; width: 100%; text-align: left; min-height: 52px;
  padding: .8em 1em; margin: .5em 0;
  font: 700 1rem/1.35 var(--font); color: var(--testo);
  background: var(--superficie); border: var(--tratto) solid var(--bordo);
  border-radius: var(--raggio-piccolo); box-shadow: var(--ombra); cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.scelta:hover { transform: translateX(4px); background: var(--superficie-2); }
.scelta[aria-pressed="true"] { background: var(--sole); color: var(--notte); }

.etichetta {
  display: inline-block; padding: .15em .7em; border-radius: 999px;
  font: 800 .8rem/1.6 var(--font); background: var(--superficie-2); color: var(--testo);
  border: 2px solid var(--bordo);
}

:focus-visible { outline: 4px solid var(--fuoco); outline-offset: 3px; }