/* Design tokens – palette proposta (da approvare)
   Base: 264653 · 2A9D8F · E9C46A · F4A261 · E76F51 · CE6A85  + crema neutra per il testo.
   Regole d'uso (contrasti calcolati sullo sfondo --bg):
   - testo e bottoni con testo: crema, giallo, arancio
   - teal e corallo: solo bordi e decorazioni (3,0 e 3,3:1, troppo scuri per il testo) */
:root{
  --bg:#264653;
  --surface:#2F5666;
  --text:#FBF6EA;
  --text-dim:#EADFC8;
  --teal:#2A9D8F;
  --giallo:#E9C46A;
  --arancio:#F4A261;
  --corallo:#E76F51;
  --rosa:#CE6A85;               /* ex magenta: punti completati */

  --accent:var(--giallo);       /* azione principale */
  --accent-2:var(--arancio);    /* azioni secondarie, selezione */
  --on-accent:#264653;
  --ok:var(--giallo);           /* risposta giusta: pieno + ✓ */
  --ko:var(--corallo);          /* risposta sbagliata: bordo tratteggiato + ✕ */
  --shade:rgba(0,0,0,.28);

  --font-title:"Newsreader", Georgia, "Times New Roman", serif;
  --font-body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --radius:24px; --tap:56px;
}