/* Forme: raggi, bordi, ombre, e la nuvola (l'unico ornamento del brand). */
:root {
  --r-s: 8px;        /* input, box di messaggio */
  --r-m: 10px;       /* kpi card, card valutazione */
  --r-l: 12px;       /* tabella, box gestione */
  --r-xl: 14px;      /* card di login */
  --r-pill: 999px;   /* bottoni, filtri, badge, nav */

  --bordo: 1px solid var(--linea);                 /* gestionali */
  --bordo-tenue: 1px solid var(--linea-tenue);     /* gestionali */
  --bordo-pubblico: 2px solid var(--celeste-50);   /* sito e grafiche */

  /* Due ombre: bassa per ciò che sta sulla pagina (card di login, tabella, box), alta per ciò che
     si stacca sopra un velo (Modal, foglio dal basso, pannello laterale). Nessuna ombra interna. */
  --ombra: 0 1px 2px rgba(28,36,43,.05), 0 10px 26px -16px rgba(28,36,43,.14);
  --ombra-alta: 0 24px 60px -20px rgba(28,36,43,.45);
  /* le due ombre qui sopra sono in antracite: solo GESTIONALI. Nel registro Pubblico l'ombra è celeste. */
  --ombra-pubblico: 0 1px 2px rgba(155,215,246,.35), 0 14px 30px -16px rgba(155,215,246,.95);

  /* Nuvole: solo le due ufficiali del grafico (Sito, Coppetta), componente Nuvola.jsx.
     Altezza minima della Coppetta (gestionali e transizioni del sito): */
  --nuvola-h: 44px;      /* @kind spacing */
}