:root{
/* ---- Griglia ------------------------------------------------------- */
--grid-columns:12; /* @kind other */
--grid-gap:24px; /* @kind spacing */
--grid-gap-media:8px; /* @kind spacing */      /* moduli immagine: fughe strette, quasi a contatto */
--container-max:1440px; /* @kind spacing */
--container-prose:760px; /* @kind spacing */
--container-doc:816px; /* @kind spacing */     /* larghezza foglio Letter a 96dpi */

/* ---- Raggi: il sistema è squadrato -------------------------------- */
--radius-0:0px;
--radius-xs:2px;           /* solo campi form e controlli piccoli */
--radius-media:0px;
--radius-pill:999px;       /* riservato a indicatori circolari */

/* ---- Bordi --------------------------------------------------------- */
--border-width:1px; /* @kind spacing */
--border-width-strong:2px; /* @kind spacing */
--rule:1px solid var(--border-hairline); /* @kind other */
--rule-strong:1px solid var(--border-strong); /* @kind other */

/* ---- Ombre: filetti, non ombre (Manuale cap. 22) -------------------- */
/* Su fondo bianco un'ombra separa davvero, quindi esiste — ma resta minima e calda,
   costruita sul Nero Field e non su un nero puro. La separazione fra elementi si
   ottiene comunque prima con il valore della superficie e con il filetto. */
--shadow-none:none;
--shadow-media:0 24px 64px rgba(15,14,12,.14);
--shadow-overlay:0 32px 80px rgba(15,14,12,.20);
--inset-hairline:inset 0 0 0 1px var(--border-hairline); /* @kind shadow */

/* ---- Rapporti immagine (archivio in prevalenza verticale) -------- */
--ratio-portrait:3/4; /* @kind other */
--ratio-portrait-tall:2/3; /* @kind other */
--ratio-landscape:16/9; /* @kind other */
--ratio-band:21/9; /* @kind other */
--ratio-square:1/1; /* @kind other */

/* ---- Z ------------------------------------------------------------- */
--z-base:0; /* @kind other */
--z-media-caption:10; /* @kind other */
--z-header:100; /* @kind other */
--z-overlay:1000; /* @kind other */

/* ---- Vetro / sfocatura: solo header su media in scorrimento ------- */
--blur-header:saturate(120%) blur(16px); /* @kind other */
--veil-header:rgba(255,255,255,.82); /* @kind color */       /* testata sopra una pagina ordine */
--veil-header-media:rgba(15,14,12,.72); /* @kind color */    /* testata sopra una fotografia */
}

/* Sopra una superficie caos la testata torna al velo scuro. */
[data-superficie="caos"],.fa1-caos{--veil-header:var(--veil-header-media)}