/* ==========================================================================
   Gettoni di Miramare, El Cocal
   Una sola fonte per il sito e per l'interfaccia del simulatore (/vola/).
   Il perché di ogni valore sta in /DIREZIONE.md (fonte: il luogo vero).

   COLORI (contrasti misurati, rapporto WCAG)
     --colore-pietra      fondo: la pietra d'Istria al sole
     --colore-inchiostro  testo e bande piene: blu notte della Marina austriaca
                          (14,4:1 sulla pietra)
     --colore-mare        collegamenti, rotta tratteggiata (6,2:1 sulla pietra)
     --colore-leccio      fondo delle zone del parco (la pietra ci sta sopra a 9,9:1)
     --colore-giallo      SOLO l'azione di volare e gli anelli (8,8:1 con l'inchiostro)
     --colore-bora        testo secondario (4,9:1 sulla pietra, AA)
     --colore-bora-chiaro testo secondario su inchiostro (8,0:1)
     --colore-filetto     linee sottili su pietra (decorative, non testo)
     --colore-errore      messaggi d'errore (su pietra, AA)

   CARATTERI (serviti da /fonts/, licenza OFL, file di licenza accanto)
     --carattere-titolo   Bodoni Moda variabile (titoli, da 28 px in su)
     --carattere-testo    Alegreya Sans 400, 400 corsivo, 700

   SPAZI: scala a passi di 4 px, --spazio-1 ... --spazio-9
   MISURE: --testo-* in rem (1rem = 16 px; minimo assoluto 14 px)
   FORME: nessun raggio, nessuna ombra. I filetti sono di 1 px, la rotta di 2 px.
   MOVIMENTO: --planata (curva e tempo delle entrate), --pressione (tocco)
   ========================================================================== */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colori */
  --colore-pietra: #F4F1EA;
  --colore-inchiostro: #0E2233;
  --colore-mare: #1B5E86;
  --colore-leccio: #27412F;
  --colore-giallo: #E8B931;
  --colore-giallo-premuto: #D4A31C;
  --colore-bora: #5A6B78;
  --colore-bora-chiaro: #A9B8C4;
  --colore-filetto: #C9C3B6;
  --colore-errore: #9E2A1F;

  /* caratteri */
  --carattere-titolo: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --carattere-testo: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

  /* misure del testo */
  --testo-piccolo: 0.9375rem;  /* 15 px: didascalie, note */
  --testo-base: 1.125rem;      /* 18 px: lettura */
  --testo-grande: 1.375rem;    /* 22 px: attacchi */
  --titolo-3: 1.75rem;         /* 28 px */
  --titolo-2: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --titolo-1: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  --interlinea: 1.5;

  /* spazi */
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 12px;
  --spazio-4: 16px;
  --spazio-5: 24px;
  --spazio-6: 32px;
  --spazio-7: 48px;
  --spazio-8: 72px;
  --spazio-9: 112px;
  --colonna: 36em;            /* misura della colonna di lettura */
  --pagina: 76rem;            /* larghezza massima della pagina */
  --bersaglio: 44px;          /* minimo di ogni cosa che si tocca */

  /* linee */
  --filetto: 1px solid var(--colore-filetto);
  --rotta: 2px;               /* spessore del tratteggio della rotta */

  /* movimento */
  --planata: 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --pressione: 60ms linear;
}