/* Ricettario — token del brand (versione 1.0, RICETTARIO-1).
   Fonte unica: docs/brand/token.json; questo file ne è la traduzione in CSS e il
   banco RC4 controlla che i due dicano la stessa cosa. I colori sono quelli che
   l'app aveva già (grafite, ambra, chiaro): VIC li ha confermati come base. */

@font-face { font-family: "Space Grotesk"; src: url("font/web/SpaceGrotesk.woff2") format("woff2");
             font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("font/web/IBMPlexSans.woff2") format("woff2");
             font-weight: 100 700; font-stretch: 85% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("font/web/IBMPlexMono-Regular.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("font/web/IBMPlexMono-SemiBold.woff2") format("woff2");
             font-weight: 600; font-display: swap; }

:root {
  /* colori di base */
  --grafite: #22242E;
  --grafite-2: #2C2F3B;
  --grafite-3: #3A3E4D;
  --ambra: #EF9F27;
  --ambra-scura: #C97F14;
  --ambra-chiara: #FDF1DC;
  --chiaro: #F4F3F0;
  --bianco: #FFFFFF;
  --grigio: #8A8F9E;
  --grigio-testo: #5D6270;
  --grigio-chiaro: #D8D6D1;
  --grigio-chiarissimo: #ECEBE7;
  --rosso: #C0392B;
  --rosso-chiaro: #FBEDEB;
  --verde: #2E7D5B;
  --verde-chiaro: #EDF6F1;

  /* caratteri */
  --titoli: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --corpo: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;

  /* spaziature: una scala sola, multipli di 4 px */
  --s1: .25rem;  --s2: .5rem;  --s3: .75rem;  --s4: 1rem;  --s5: 1.5rem;  --s6: 2rem;

  /* forme */
  --raggio: 8px;
  --raggio-carta: 12px;
  --bordo: 1px solid var(--grigio-chiaro);
  --ombra: 0 1px 2px rgba(34,36,46,.06), 0 2px 8px rgba(34,36,46,.05);
  --ombra-alta: 0 8px 28px rgba(34,36,46,.18);
  --tocco: 44px;              /* il bersaglio minimo di un dito */
  --testata: 56px;
  --barra-basso: 64px;

  /* i nomi che usa accesso.css del kit d'accesso della flotta (copiato identico, S42):
     «ogni app mette i suoi colori» */
  --innova-grafite: var(--grafite);
  --innova-ambra: var(--ambra);
}