/* I token del CasePreparation Design System, come li definisce
   l'artefatto di riferimento: project/tokens.json.

   Qui ci sono solo i nomi e i valori. Chi li usa decide come, e nessuna
   pagina scrive un colore o una distanza fuori da questo elenco.

   Due cose che si sbagliano sempre, scritte qui perche' chi apre questo
   file le legga prima di usare i token:

   1. Il fondo e' sempre bianco. Non off-white, non grigio chiaro. L'unico
      pieno di tutto il sistema e' il pulsante di azione primaria, uno per
      schermata. Dove serve una fascia dietro un titolo si usa
      --surface-brand-tint con testo scuro sopra, mai testo bianco.

   2. Il blu ha due valori e non sono intercambiabili. --brand e' il colore
      del marchio: su bianco fa 3,8:1, quindi va bene per logo, filetti,
      titoli sopra i 24px e serie dei grafici, e non va bene per il testo a
      corpo normale. Per testo, link e pieni si usa --brand-deep, 5,7:1. */

:root {
  color-scheme: light;

  /* superfici */
  --surface-page: #ffffff;
  --surface-sunken: #f7fafc;
  --surface-brand-soft: #e6f4fa;
  --surface-brand-tint: #c9dfe9;
  --surface-warm: #f6f0e8;
  --surface-fill: #006e99;

  /* inchiostri */
  --ink-title: #0e2733;
  --ink-body: #33454f;
  --ink-muted: #5b7180;
  --ink-inverse: #ffffff;

  /* blu */
  --brand: #008cc0;
  --brand-deep: #006e99;
  --brand-pale: #5aafd0;
  --warm-ink: #8a5a2b;

  /* stati */
  --state-solid: #0f7b62;
  --state-watch: #9c6b0a;
  --state-gap: #a33a2e;

  /* filetti */
  --line: #dce6ec;
  --line-strong: #b9cbd6;

  /* grafici, cinque serie al massimo */
  --chart-1: #006e99;
  --chart-2: #5aafd0;
  --chart-3: #9c6b0a;
  --chart-4: #0f7b62;
  --chart-5: #5b7180;

  /* famiglie: due, nessuna eccezione. Newsreader solo nei titoli di pagina
     e mai sotto i 19px; dentro l'app si usa solo Lato. */
  --font-display: Newsreader, Georgia, "Iowan Old Style", Palatino, serif;
  --font-text: Lato, -apple-system, "Segoe UI", system-ui, sans-serif;

  /* scala a base 4: le distanze fuori scala non esistono */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* le ombre sollevano una cosa sola per schermata */
  --shadow-sm: 0 1px 2px rgba(14, 39, 51, 0.06);
  --shadow-md: 0 6px 20px rgba(14, 39, 51, 0.08);
}