/* Lizas — design token. Unica fonte per colori, tipografia, spaziature, raggi.
   I valori vengono dal brief (avorio, prugna, viola, lilla, rosa) con le aggiunte necessarie agli stati. */
:root {
  /* Colore: base */
  --avorio: #FFFDFA;        /* sfondo dell'app */
  --prugna: #292338;        /* testo principale, schermata chiamata */
  --viola: #7653CF;         /* accento, azioni principali */
  --viola-scuro: #5B3DB0;   /* testo accento su superfici lilla */
  --lilla: #F4F0F8;         /* superficie secondaria */
  --lilla-2: #E9E0FB;       /* bolla inviata, pulsante secondario */
  --rosa: #E8B2BC;          /* identità vocale */
  --rosa-chiaro: #F8E4E8;   /* barra di registrazione */
  --bianco: #FFFFFF;        /* bolla ricevuta, gruppi di celle */

  /* Colore: testo e linee */
  --testo: #292338;
  --testo-2: #6A6379;       /* secondario, 5.6:1 su avorio */
  --testo-3: #8F889C;       /* solo elementi non essenziali */
  --linea: #E7E1EE;

  /* Colore: stati */
  --errore: #B4324A;
  --errore-sfondo: #FBECEF;
  --ok: #2C7A5A;
  --attenzione-sfondo: #FFF4DC;
  --attenzione-testo: #6B4700;

  /* Sfumatura della voce (orbita, simbolo) */
  --voce: conic-gradient(from 200deg, #E8B2BC, #D3BDF3, #7653CF, #B79AEC, #E8B2BC);

  /* Raggi */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  /* Spaziature (multipli di 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Caratteri: sistema iOS. Il tondo si usa per logotipo e titoli. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-tondo: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", -apple-system, system-ui, sans-serif;
}

/* Scala tipografica. --k è il moltiplicatore del testo dinamico (1, 1.15, 1.3). */
.tk {
  --k: 1;
  --t-large: calc(32px * var(--k));
  --t-title: calc(24px * var(--k));
  --t-head: calc(17px * var(--k));
  --t-body: calc(17px * var(--k));
  --t-sub: calc(15px * var(--k));
  --t-foot: calc(13px * var(--k));
  --t-cap: calc(12px * var(--k));
  font-size: var(--t-body);
  line-height: 1.3;
}