/* I gettoni della direzione «Carta di volo» (DIREZIONE.md) e i caratteri.
   Questo file lo carica anche il simulatore: i nomi delle proprietà non si cambiano. */

@font-face {
  font-family: "Spectral";
  src: url("/caratteri/spectral-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/caratteri/spectral-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/caratteri/barlow-semi-condensed-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("/caratteri/barlow-semi-condensed-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colori: vengono dalle convenzioni delle carte nautiche */
  --carta: #F6F2E7;    /* la carta, e il mare profondo che nelle carte resta bianco */
  --terra: #EAD9A6;    /* il giallo della terraferma */
  --fondale: #CBE0E6;  /* l'azzurro dei bassi fondali */
  --china: #1D2A33;    /* l'inchiostro: testo, costa, moli, filetti */
  --rosso: #B3261E;    /* la rotta: SOLO percorso, tappe e comando principale */
  --riga: #C9C3B2;     /* la riga leggera dentro il registro (china molto diluita, piena) */

  /* caratteri */
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  /* forme e misure */
  --filetto: 1px solid var(--china);
  --bordo: 16px;             /* il margine della pagina sul telefono */
  --tocco: 44px;             /* il bersaglio minimo */
  --passo-tacche: 24px;      /* il passo del margine graduato */
  --riga-registro: 52px;     /* l'altezza di una riga del registro, vera o scheletro */

  /* movimento: china su carta, a scatto */
  --scatto: 0.1s steps(2, end);
  --traccia: 2.6s;
}
@media (min-width: 900px) {
  :root { --bordo: 40px; }
}