/* =========================================================================
   Font self-hosted — SIL Open Font License 1.1
   Archivo (Omnibus-Type) · Bodoni Moda (Indestructible Type)
   Serviti dal nostro dominio: nessuna richiesta a fonts.gstatic.com.
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback con metriche riallineate: riduce lo scarto di layout quando il
   font reale sostituisce quello di sistema (CLS). */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bodoni Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 92%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}
/* =========================================================================
   Silvia Mora — Design tokens
   Fonte unica di verità per colore, tipografia, spazio, ritmo.

/* =========================================================================
   Perlen Reich — token
   Base luminosa. Il colore non si dipinge: si rifrange.
   ========================================================================= */

:root {
  /* ---- Terreni ------------------------------------------------------ */
  --c-bianco:   #FFFFFF;  /* il fondo dominante. Il pezzo deve respirare  */
  --c-latte:    #FBFBFA;  /* fascia alternata, calore appena percettibile */
  --c-nebbia:   #F0F0EF;  /* superfici, campiture                         */

  /* ---- Inchiostri --------------------------------------------------- */
  --c-inchiostro: #0B0C0F;  /* testo. Nero freddo, mai bruno              */
  --c-grafite:    #131419;  /* campo di contrasto, piede, hero            */
  --c-ombra:      #6B6E76;  /* testo secondario, freddo                   */
  --c-pietra:     #D6D6D4;  /* filetti marcati                            */

  /* ---- Accenti — uso minimo, mai campiture --------------------------- */
  --c-blu:       #2733D8;  /* blu di cristallo. Solo tratti e stati       */
  --c-champagne: #C8B79A;  /* metallo. Solo filetti di 1px                */

  /* derivati */
  --c-filetto:      color-mix(in oklab, var(--c-inchiostro) 12%, transparent);
  --c-filetto-soft: color-mix(in oklab, var(--c-inchiostro) 6%,  transparent);
  --c-filetto-scuro: color-mix(in oklab, var(--c-bianco) 16%, transparent);

  /* Il tema si ribalta per sezione: i componenti leggono queste due
     variabili invece di valori fissi, così una sezione scura non richiede
     una seconda classe per ogni elemento che contiene. */
  --fondo: var(--c-bianco);
  --testo: var(--c-inchiostro);
  --testo-2: var(--c-ombra);
  --filo: var(--c-filetto);
}

/* Inversione: una sola dichiarazione ribalta tutto ciò che sta dentro. */
.su-grafite {
  --fondo: var(--c-grafite);
  --testo: var(--c-bianco);
  --testo-2: color-mix(in oklab, var(--c-bianco) 58%, transparent);
  --filo: var(--c-filetto-scuro);
  background: var(--fondo);
  color: var(--testo);
}

:root {
  /* ---- Tipografia --------------------------------------------------- */
  --f-display: "Bodoni Moda", "Bodoni Fallback", Didot, Georgia, serif;
  --f-testo:   "Archivo", "Archivo Fallback", Helvetica, Arial, sans-serif;

  --t-hero:   clamp(3.25rem, 0.6rem + 11.5vw, 13.5rem);
  --t-xxl:    clamp(2.5rem, 1.3rem + 5.2vw, 6.5rem);
  --t-xl:     clamp(2rem,   1.3rem + 3vw,  4rem);
  --t-l:      clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
  --t-m:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-base:   1rem;
  --t-s:      0.875rem;
  --t-xs:     0.75rem;
  --t-label:  0.6875rem;

  --lh-stretta: 0.9;
  --lh-media:   1.12;
  --lh-testo:   1.6;

  --ls-display: -0.025em;
  --ls-label:   0.16em;

  /* ---- Spazio ------------------------------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;   --s-11: 12rem;

  --sezione:   clamp(5rem, 2rem + 9vw, 12rem);
  --sezione-s: clamp(3rem, 1.5rem + 5vw, 7rem);

  /* ---- Griglia ------------------------------------------------------ */
  --margine:   clamp(1.25rem, 0.4rem + 3.4vw, 6rem);
  --max-w:     108rem;
  --max-testo: 32rem;
  --colonne:   12;
  --gutter:    clamp(0.75rem, 0.3rem + 1.2vw, 1.5rem);

  /* ---- Motion ------------------------------------------------------- */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --e-espr:   cubic-bezier(0.34, 1.24, 0.36, 1);
  --d-corta: 220ms;
  --d-media: 480ms;
  --d-lunga: 900ms;

  --z-base: 1; --z-sticky: 50; --z-header: 100; --z-overlay: 200; --z-modale: 300;
}

/* Dispersione — la firma cromatica del marchio.
   Il cristallo scompone la luce bianca: il colore compare come fenomeno
   ottico, mai come campitura. Si usa su bordi di 1-2px e su sfioramenti. */
:root {
  --spettro: linear-gradient(
    90deg,
    #2733D8 0%, #6E5BE0 18%, #C05CC8 36%,
    #E08A6B 56%, #D8C36A 74%, #5FC7B4 90%, #2733D8 100%
  );
}