/* ============================================================
   FamilyDoctor - le fondamenta dell'aspetto.

   Il carattere, i colori, le misure, l'azzeramento del browser, le
   icone e il colore che ogni funzione porta con se'. Non disegna
   niente: stabilisce il vocabolario con cui e' scritto tutto il
   resto, e va letto per primo.

   Regola vincolante: ogni valore estetico vive nel blocco :root qui
   sotto e in nessun altro punto del progetto. Le classi descrivono
   il ruolo, non l'aspetto.
   ============================================================ */

/* ---------- 1. Font, serviti in locale ---------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/font/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/font/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/font/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/font/poppins-800.woff2') format('woff2');
}

/* ---------- 2. Token del tema ---------- */

:root {
  /* Marca e superfici */
  --verde-scuro:        #1D6B4F;
  --verde-medio:        #2F855D;
  --verde-profondo:     #164F3B;
  --verde-card:         #4FBE81;
  --verde-chiaro:       #3E9268;
  --verde-tinta:        #DDF0E4;
  --verde-avatar:       #CFE9DA;

  /* Azione */
  --arancio:            #F2734B;
  --arancio-blob:       #D4522A;
  --arancio-tinta:      #FBE3DA;
  --arancio-testo:      #D4522A;

  /* Pericolo — solo admin e configuratore */
  --rosso:              #E24B4A;
  --rosso-tinta:        #FCEBEB;
  --rosso-testo:        #A32D2D;

  /* Categorie delle funzioni.

     Il blu tiene insieme le tre cose che si mandano al medico e che
     lui poi lavora: ricetta, referto, certificato. Il certificato ha
     lo stesso blu un gradino piu' fondo, perche' e' il piu' formale
     dei tre e va distinto senza staccarsi dagli altri. */
  --periwinkle:         #8B93E8;
  --periwinkle-blob:    #2D3A8C;
  --blu-carta:          #5B7CE0;
  --blu-carta-blob:     #2A3F91;
  --blu-fondo:          #4059C7;
  --blu-fondo-blob:     #22307A;
  --giallo-carta:       #F0C349;
  --giallo-carta-blob:  #B8860B;
  /* Due colori in piu' per i bottoni, scelti nel
     Menu del ruolo: non hanno una funzione loro. */
  --viola:              #8A6CD6;
  --viola-blob:         #4E3699;
  --rosa:               #DB6E9C;
  --rosa-blob:          #96305C;
  --ambra:              #F5A83C;
  --ambra-blob:         #C97B12;
  --ambra-tinta:        #FBEBD2;
  --ambra-testo:        #C97B12;
  /* Le tinte chiare del blu e del giallo: fondi della pagina
     «Benvenuto/a!», per i vaccini e per la bacheca. */
  --blu-tinta:          #E3E8FA;
  --giallo-tinta:       #FFF8E6;

  /* Neutri */
  --crema:              #FAF6F0;
  --bianco:             #FFFFFF;
  --testo:              #1F1F1F;
  --testo-tenue:        #8A8781;
  --testo-debole:       #ABA8A3;
  --testo-disabilitato: #D6D3CE;
  --icona-inattiva:     #C9C6C1;

  /* Superfici di servizio */
  --scheletro:          #F1EFE9;
  --filo:               #F7F5F0;
  --bordo-campo:        #E8E5DE;
  --selezione:          #F4F9F6;
  --verde-etichetta:    #7FBFA0;
  /* Le vignette delle conversazioni: le proprie e quelle dell'altro. */
  --vignetta-mia:       var(--verde-tinta);
  --vignetta-altrui:    #EEECE7;

  /* Tipografia */
  --font: 'Poppins', system-ui, sans-serif;
  --peso-titolo: 700;
  --peso-numero: 800;
  --peso-medio: 500;
  --peso-testo: 400;
  --t-saluto: 22px;
  --t-titolo-sezione: 17px;
  --t-titolo-schermata: 16px;
  --t-card-titolo: 14px;
  --t-card: 13px;
  --t-corpo: 12px;
  --t-piccolo: 11px;
  --t-minimo: 10px;
  --t-numero-grande: 26px;

  /* Forma e spazio */
  --r-foglio: 24px;
  --r-card: 16px;
  --r-card-piccola: 14px;
  --r-controllo: 12px;
  --r-icona: 13px;
  --r-pastiglia: 8px;
  --s-schermo: 14px;
  --s-card: 11px;
  --s-gap: 10px;

  /* Impaginazione */
  --largo: 900px;

  /* Misure di servizio, derivate: non sono scelte estetiche nuove
     ma costanti di attuazione che servono in più punti */
  --tocco-minimo: 44px;
  --paziente-largo: 480px;
  --menu-largo: 150px;
  --velo: rgba(31, 31, 31, 0.45);
}

/* ---------- 3. Azzeramento e basi ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-weight: var(--peso-testo);
  font-size: var(--t-corpo);
  color: var(--testo);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

/* ---------- 5. Icone ---------- */

.icona {
  width: 21px;
  height: 21px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icona--piccola { width: 16px; height: 16px; }
.icona--grande  { width: 34px; height: 34px; }

/* ---------- 8. Categorie: il colore per funzione ---------- */

/* Il colore raggruppa per che cosa si sta facendo, non per capriccio:
   verde chi prende un posto in agenda, arancio chi lo libera, blu le
   tre carte che si mandano al medico, giallo il parlare. */
[data-categoria="appuntamento"] { --fondo-card: var(--verde-card);   --fondo-blob: var(--verde-scuro); }
[data-categoria="domiciliare"]  { --fondo-card: var(--verde-card);   --fondo-blob: var(--verde-scuro); }
[data-categoria="annullamento"] { --fondo-card: var(--arancio);      --fondo-blob: var(--arancio-blob); }
[data-categoria="prescrizione"] { --fondo-card: var(--blu-carta);    --fondo-blob: var(--blu-carta-blob); }
[data-categoria="referto"]      { --fondo-card: var(--blu-carta);    --fondo-blob: var(--blu-carta-blob); }
[data-categoria="certificato"]  { --fondo-card: var(--blu-fondo);    --fondo-blob: var(--blu-fondo-blob); }
[data-categoria="vaccinazione"] { --fondo-card: var(--rosa);         --fondo-blob: var(--rosa-blob); }
[data-categoria="messaggio"]    { --fondo-card: var(--giallo-carta); --fondo-blob: var(--giallo-carta-blob); }
[data-categoria="informazioni"] { --fondo-card: var(--verde-scuro);  --fondo-blob: var(--verde-medio); }
/* La parola d'ordine sul telefono: e' l'unica voce che chiude una
   porta invece di aprirla, e il rosso lo dice prima di leggere. */
[data-categoria="protetto"]     { --fondo-card: var(--rosso);        --fondo-blob: var(--rosso-testo); }
/* La riga della richiesta appena evasa: verde, e il riquadro intero
   si tinge di verde chiaro. E' l'unica riga che porta una buona
   notizia, e si vede una volta sola. */
[data-categoria="pronta"]       { --fondo-card: var(--verde-card);   --fondo-blob: var(--verde-scuro); }
.voce-navigazione[data-categoria="pronta"] { background: var(--verde-tinta); }
/* Le richieste che aspettano, in home: gialle (2 novembre 2026). */
[data-categoria="attesa"]       { --fondo-card: var(--ambra);        --fondo-blob: var(--ambra-blob); }
.voce-navigazione[data-categoria="attesa"] { background: var(--ambra-tinta); }
/* Le richieste non accolte, in home: grigie, per non confonderle con
   quelle che aspettano (2 novembre 2026). */
[data-categoria="non-accolta"]  { --fondo-card: #888780;             --fondo-blob: #5F5E5A; }
.voce-navigazione[data-categoria="non-accolta"] { background: #F1EFE8; }

/* Il colore scelto per un bottone nel Menu del ruolo (22 ottobre
   2026). Sta dopo le categorie: quando c'e', vale lui. Senza, resta
   il colore della funzione. */
[data-colore="verde"]       { --fondo-card: var(--verde-card);   --fondo-blob: var(--verde-scuro); }
[data-colore="verde-scuro"] { --fondo-card: var(--verde-scuro);  --fondo-blob: var(--verde-medio); }
[data-colore="azzurro"]     { --fondo-card: var(--blu-carta);    --fondo-blob: var(--blu-carta-blob); }
[data-colore="blu"]         { --fondo-card: var(--blu-fondo);    --fondo-blob: var(--blu-fondo-blob); }
[data-colore="viola"]       { --fondo-card: var(--viola);        --fondo-blob: var(--viola-blob); }
[data-colore="giallo"]      { --fondo-card: var(--giallo-carta); --fondo-blob: var(--giallo-carta-blob); }
[data-colore="arancio"]     { --fondo-card: var(--arancio);      --fondo-blob: var(--arancio-blob); }
[data-colore="rosa"]        { --fondo-card: var(--rosa);         --fondo-blob: var(--rosa-blob); }