/* ============================================================
   LE UTILITÀ DI SPAZIATURA

   Non sono componenti: sono la stessa riga di CSS che stava scritta in
   duecentosettanta attributi `style` nel markup. Un `gap:8px` ripetuto
   cinquantadue volte dentro all'HTML generato non è una decisione di
   layout diversa cinquantadue volte — è una riga di CSS che non era mai
   stata scritta.

   Il prefisso `u-` le tiene fuori dal namespace dei componenti, dove §12
   vieta i nomi generici: `.u-g8` non può collidere con niente, perché
   niente altro nell'app si chiama così.

   **Questo foglio si carica per ultimo**, dopo tutte le pagine. Una
   utilità e una classe di componente hanno la stessa specificità (una
   classe ciascuna), quindi vince quella che il browser legge dopo: se
   `utilities.css` stesse in mezzo, `.sl-row{gap:10px}` batterebbe
   `.u-g6` e l'utilità non servirebbe a niente.

   A cosa serve, oltre alla pulizia: finché nel markup c'è anche un solo
   attributo `style`, la CSP non può stringere `style-src` a `'self'`.
   Questo foglio è il primo pezzo di quella strada — non l'arrivo: restano
   le misure calcolate, che una classe non può esprimere e che vanno
   scritte dal codice dopo il disegno.
   ============================================================ */

/* distanza fra gli elementi di una riga o di una colonna */
.u-g2{gap:2px;}
.u-g4{gap:4px;}
.u-g5{gap:5px;}
.u-g6{gap:6px;}
.u-g8{gap:8px;}
.u-g10{gap:10px;}
.u-g12{gap:12px;}
.u-g14{gap:14px;}
.u-g16{gap:16px;}

/* stacco da quello che viene prima */
.u-mt2{margin-top:2px;}
.u-mt3{margin-top:3px;}
.u-mt4{margin-top:4px;}
.u-mt6{margin-top:6px;}
.u-mt8{margin-top:8px;}
.u-mt10{margin-top:10px;}
.u-mt12{margin-top:12px;}
.u-mt14{margin-top:14px;}
.u-mt16{margin-top:16px;}
.u-mt18{margin-top:18px;}
.u-mt20{margin-top:20px;}
.u-mt24{margin-top:24px;}

/* i primitivi di disposizione che tornano in mezza applicazione: spingere
   una cosa a fondo riga, lasciare che una colonna si stringa, togliere il
   margine di fabbrica a un titolo */
.u-ml-auto{margin-left:auto;}
.u-mr-auto{margin-right:auto;}
.u-minw0{min-width:0;}
.u-flex1{flex:1;}
.u-m0{margin:0;}
.u-center{text-align:center;}
.u-right{text-align:right;}
.u-pointer{cursor:pointer;}
.u-muted{color:var(--muted);}
/* Il fondo prende la tinta che viene dal record (`--tint`). Con il
   ripiego esplicito: se la tinta non arriva, resta il primario invece di
   lasciare la dichiarazione in un limbo. */
.u-bg-tint{background:var(--tint,var(--primary));}
/* Nascosto. Non serve `!important`: questo foglio si carica per ultimo e
   una classe batte una classe, quindi vince su `.form-row{display:grid}`
   e compagnia. */
.u-hidden{display:none;}

/* La misura di un'icona dentro a un bottone o a una linguetta. Le tre
   taglie ricorrono in mezza applicazione, sempre uguali, e stavano
   scritte a mano una per una. */
.u-ico12 svg, svg.u-ico12, .u-ico12{width:12px;height:12px;}
.u-ico13 svg, svg.u-ico13, .u-ico13{width:13px;height:13px;}
.u-ico14 svg, svg.u-ico14, .u-ico14{width:14px;height:14px;}
.u-ico15 svg, svg.u-ico15, .u-ico15{width:15px;height:15px;}
/* Il bottone che occupa tutta la colonna, centrato: nei riquadri
   laterali e nei piedi di scheda ricorre dappertutto. */
.u-btn-full{width:100%;justify-content:center;}

/* e da quello che viene dopo */
.u-mb0{margin-bottom:0;}
.u-mb4{margin-bottom:4px;}
.u-mb6{margin-bottom:6px;}
.u-mb8{margin-bottom:8px;}
.u-mb10{margin-bottom:10px;}
.u-mb12{margin-bottom:12px;}
.u-mb14{margin-bottom:14px;}
.u-mb16{margin-bottom:16px;}
.u-mb20{margin-bottom:20px;}

/* ============================================================
   I TONI

   La coppia «fondo tenue + inchiostro forte» e' il modo in cui questa
   applicazione distingue delle categorie senza affidarsi a un pieno
   colorato con del testo bianco sopra, che di notte sparisce. Erano
   scritte a mano in cinque posti diversi — le persone dello studio, i
   riquadri di Contatti, quelli di Clienti, quelli condivisi, le famiglie
   di file — e ogni volta finivano in un attributo `style`. Qui stanno una
   volta.
   ============================================================ */
.u-tone-primary{background:var(--primary-soft);color:var(--primary-dark);}
.u-tone-blue{background:var(--blue-soft);color:var(--blue);}
.u-tone-violet{background:var(--violet-soft);color:var(--violet);}
.u-tone-green{background:var(--green-soft);color:var(--green-dark);}
.u-tone-pink{background:var(--pink-soft);color:var(--pink);}
.u-tone-amber{background:var(--amber-soft);color:var(--amber-dark);}
.u-tone-red{background:var(--red-soft);color:var(--red-dark);}
.u-tone-neutral{background:var(--track);color:var(--neutral-ink);}

/* Le stesse otto tinte senza il fondo: dove il tono lo porta gia'
   qualcos'altro e qui serve solo l'inchiostro. */
.u-ink-primary{color:var(--primary-dark);}
.u-ink-blue{color:var(--blue);}
.u-ink-violet{color:var(--violet);}
.u-ink-green{color:var(--green-dark);}
.u-ink-pink{color:var(--pink);}
.u-ink-amber{color:var(--amber-dark);}
.u-ink-red{color:var(--red-dark);}
.u-ink-neutral{color:var(--neutral-ink);}

/* E quando la tinta non e' una delle otto ma viene da un record — il
   colore di un cliente, di un tipo di ticket — il fondo si ricava da
   quella con una mescolanza, invece di appiccicare due cifre di
   trasparenza a un esadecimale (che funziona solo se e' un esadecimale:
   con un token non funziona affatto). */
.u-tint-soft{background:color-mix(in srgb, var(--tint,var(--primary)) 14%, transparent);color:var(--tint,var(--primary));}
.u-tint-bg{background:var(--tint,var(--primary));}
.u-ink-tint{color:var(--tint,var(--primary));}