/*
  Landing di Milano Service, direzione 1 "Essenziale" - token.
  Nati dalla bozza di fase 4 (direzione-1-essenziale.tokens.css), adattati al canone del 2026-11-04
  (DIREZIONE.md): pesi dei titoli 600 e 700, segnaposto "da confermare", niente cromo di bozza.
  Ogni colore, misura e durata della pagina vive qui. Le variabili --x- sono della firma.
*/
:root {
  /* colore: la palette chiusa del brief */
  --fondo: #FCFCFB;        /* bianco appena tinto: il bianco puro con il nero accanto abbaglia */
  --fondo-scheda: #FFFFFF;
  --fondo-2: #F3F3F2;
  --fondo-3: #141414;
  --fondo-3b: #1E1E1D;     /* schede e filetti sul nero */
  --inchiostro: #141414;
  --inchiostro-tenue: #5E5E5E;
  --accento: #C4000A;
  --accento-2: #9C0008;
  --filo: #E4E4E2;
  --filo-forte: #141414;

  /* derivati, solo per alpha o color-mix dalla palette */
  --x-su-scuro: color-mix(in srgb, var(--fondo) 94%, transparent);
  --x-su-scuro-tenue: color-mix(in srgb, var(--fondo) 68%, transparent);
  --x-filo-scuro: color-mix(in srgb, var(--fondo) 18%, transparent);
  --x-filo-su-2: color-mix(in srgb, var(--inchiostro) 14%, var(--fondo-2));
  --x-bordo-campo: color-mix(in srgb, var(--inchiostro) 30%, transparent);
  --x-bordo-campo-hover: color-mix(in srgb, var(--inchiostro) 60%, transparent);
  --x-velo-scelta: color-mix(in srgb, var(--inchiostro) 4%, var(--fondo));

  /* tipografia */
  --font-titolo: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-testo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-etichetta: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fs-1: clamp(2.6rem, 1.6rem + 4.3vw, 6.25rem);
  --fs-2: clamp(2rem, 1.35rem + 2.7vw, 4.25rem);
  --fs-3: clamp(1.6rem, 1.25rem + 1.5vw, 2.75rem);
  --fs-4: clamp(1.2rem, 1.08rem + 0.55vw, 1.6rem);
  --fs-5: clamp(1.0625rem, 1rem + 0.3vw, 1.3rem);
  --fs-6: 1rem;
  --fs-7: 0.875rem;
  --fs-8: 0.75rem;
  --x-fs-fascia: 0.6875rem;
  --x-fs-campo: 1rem;
  --x-fs-gigante: clamp(4.5rem, 2rem + 9vw, 11rem);
  --lh-stretta: 1.02;
  --lh-normale: 1.55;
  --x-lh-media: 1.2;
  --tracking-etichetta: 0.14em;
  --x-tracking-fascia: 0.03em;
  --x-tracking-titolo: -0.035em;
  --x-tracking-btn: 0.06em;
  --misura: 34rem;
  --x-misura-titolo: 13ch;

  /* spazio */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --sp-6: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);
  --x-sp-mini: 0.25rem;
  --pad-x: clamp(1.25rem, 0.6rem + 2.8vw, 4rem);
  --max-w: 88rem;
  --x-gutter: clamp(1rem, 0.5rem + 1.8vw, 2.5rem);

  /* forma */
  --raggio: 0;
  --raggio-s: 2px;
  --filetto-sp: 1px;
  --x-filetto-titolo: 4px;
  --x-filetto-titolo-l: 4.5rem;
  --x-filetto-spazio: 1.1rem;
  --x-filetto-riga: 2px;
  --x-tick-l: 1rem;
  --x-tick-allungo: 2.75;
  --x-segno: 0.7rem;
  --x-segno-h: 0.85rem;
  --x-stroke-cifra: 1px;
  --x-focus-sp: 2px;
  --x-focus-off: 3px;
  --x-focus-campo: 1px;

  /* il taglio obliquo: la stessa inclinazione della gamba spezzata della A di MILANO */
  --x-taglio-x: clamp(44px, 5.5vw, 104px);
  --x-taglio-y: calc(var(--x-taglio-x) * 1.7);
  --x-taglio-s: 11px;
  --x-taglio-s-y: calc(var(--x-taglio-s) * 1.7);

  --x-sagoma-alto-sx: polygon(var(--x-taglio-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--x-taglio-y));
  --x-sagoma-alto-sx-chiusa: polygon(var(--x-taglio-x) 0, var(--x-taglio-x) 0, calc(var(--x-taglio-x) / 2) calc(var(--x-taglio-y) / 2), 0 var(--x-taglio-y), 0 var(--x-taglio-y));
  --x-sagoma-basso-dx: polygon(0 0, 100% 0, 100% calc(100% - var(--x-taglio-y)), calc(100% - var(--x-taglio-x)) 100%, 0 100%);
  --x-sagoma-basso-dx-chiusa: polygon(calc(100% - var(--x-taglio-x) / 2) calc(100% - var(--x-taglio-y) / 2), 100% calc(100% - var(--x-taglio-y)), 100% calc(100% - var(--x-taglio-y)), calc(100% - var(--x-taglio-x)) 100%, calc(100% - var(--x-taglio-x)) 100%);
  --x-sagoma-btn: polygon(0 0, 100% 0, 100% calc(100% - var(--x-taglio-s-y)), calc(100% - var(--x-taglio-s)) 100%, 0 100%);
  --x-sagoma-segno: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 76%);
  --x-raggio-foto: 10px;   /* solo la galleria: angoli arrotondati (Pasquale, 2026-11-05) */
  --x-taglio-m: 22px;
  --x-taglio-m-y: calc(var(--x-taglio-m) * 1.7);
  --x-sagoma-scheda: polygon(0 0, 100% 0, 100% calc(100% - var(--x-taglio-m-y)), calc(100% - var(--x-taglio-m)) 100%, 0 100%);

  /* ombra */
  --ombra: 0 30px 60px -36px color-mix(in srgb, var(--inchiostro) 30%, transparent);
  --ombra-corta: 0 2px 10px color-mix(in srgb, var(--inchiostro) 10%, transparent);

  /* movimento */
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 620ms;
  --x-dur-apertura: 760ms;
  --curva-uscita: cubic-bezier(.23, 1, .32, 1);     /* ingressi */
  --curva-entrata: cubic-bezier(.77, 0, .175, 1);   /* spostamenti */
  --scaletta: 40ms;
  --x-scaletta-passi: 90ms;
  --x-ritardo-base: 0ms;
  --x-avviso-durata: 4200ms;
  --x-sposta: 14px;
  --x-sposta-scheda: 24px;
  --x-sposta-freccia: 4px;
  --x-premuto: 1px;
  --x-scala-min: .95;
  --x-zoom-foto: 1.06;
  --x-io-margine: 0px 0px -8% 0px;

  /* pesi: il contrasto lo da' la misura, non lo spessore (canone, scelta 4a) */
  --peso-titolo: 600;
  --peso-apertura: 700;
  --peso-etichetta: 600;

  /* segnaposto "(da confermare)": altro colore, altro carattere, corsivo. Si toglie prima della pubblicazione */
  --da-confermare: #6B3FC4;
  --font-da-confermare: Georgia, "Times New Roman", serif;

  /* fotografia: colore originale, nessun filtro e nessun velo */
  --foto-filtro: none;
  --foto-velo: transparent;

  /* misure di struttura */
  --x-altezza-testata: 60px;
  --x-logo-h: 19px;
  --x-logo-h-piede: 24px;
  --x-btn-h: 52px;
  --x-btn-h-s: 44px;
  --x-btn-pad: 1.35rem;
  --x-btn-pad-s: 1rem;
  --x-modulo-gap: 1.25rem;
  --x-modulo-label: 0.45rem;
  --x-modulo-pad: 1.25rem;
  --x-modulo-campo-h: 48px;
  --x-modulo-scelta-h: 44px;
  --x-modulo-area-h: 5.5rem;
  --x-foglio-vuoto: #737373;
  --x-icona: 1.1rem;
  --x-icona-freccia: 1rem;
  --x-col-num: 3.25rem;
  --x-barra-h: 72px;
  --x-avviso-max: 30rem;
  --x-scheda-pad: 1.25rem;
  --x-foto-apertura-h: clamp(190px, 27vh, 250px);
  --x-foto-servizi-h: 11rem;
  --x-foto-metodo-l: 42%;
  --x-chevron: 0.5rem;
}

@media (min-width: 700px) {
  :root {
    --x-scheda-pad: 2rem;
    --x-foto-apertura-h: 26rem;
    --x-foto-servizi-h: 22rem;
    --x-col-num: 4rem;
    --x-modulo-pad: 2rem;
  }
}

@media (min-width: 1100px) {
  :root {
    --x-logo-h-piede: 30px;
    --x-foto-apertura-h: min(66vh, 38rem);
    --x-foto-servizi-h: min(72vh, 40rem);

    /* La scala del computer guarda anche l'altezza della finestra (Pasquale, 2026-11-05, DIREZIONE.md).
       I massimi sono i valori che vanno bene su uno schermo da 2560x1440, dove la pagina occupa il 55% della larghezza;
       su una finestra da 1470x816, dove prima occupava tutto, titoli, spazi e larghezza scendono. Sul telefono non cambia niente. */
    --fs-2: clamp(2.25rem, min(1.35rem + 2.7vw, 5.6vh), 4.25rem);
    --fs-3: clamp(1.5rem, min(1.25rem + 1.5vw, 3.7vh), 2.75rem);
    --fs-4: clamp(1.15rem, min(1.08rem + 0.55vw, 2.6vh), 1.6rem);
    --fs-5: clamp(1rem, min(1rem + 0.3vw, 2.15vh), 1.3rem);
    --fs-6: clamp(0.9375rem, 1.85vh, 1rem);
    --sp-3: clamp(1.1rem, 1.85vh, 1.5rem);
    --sp-4: clamp(1.75rem, 3.1vh, 2.5rem);
    --sp-5: clamp(3rem, min(2rem + 5vw, 8vh), 6.5rem);
    --sp-6: clamp(4rem, min(2.5rem + 7vw, 11.7vh), 9.5rem);
    --x-gutter: clamp(1rem, min(0.5rem + 1.8vw, 3.1vh), 2.5rem);
    --max-w: clamp(72rem, 150vh, 88rem);
    --x-taglio-x: clamp(44px, min(5.5vw, 8vh), 104px);
    --x-altezza-testata: clamp(62px, 8vh, 78px);
    --x-logo-h: clamp(20px, 2.9vh, 24px);
    --x-btn-h: clamp(46px, 6.4vh, 52px);
    --x-btn-h-s: clamp(40px, 5.4vh, 44px);
    --x-scheda-pad: clamp(1.75rem, 3.4vh, 2.75rem);
    /* Il modulo: l'aria viene prima, e a 1470x816 il modulo chiuso sta intero nella schermata (Pasquale, 2026-11-05) */
    --x-modulo-gap: clamp(1rem, 2.35vh, 1.3rem);
    --x-modulo-label: clamp(0.4rem, 0.85vh, 0.6rem);
    --x-modulo-pad: clamp(1.5rem, 3.4vh, 2.25rem);
    --x-modulo-campo-h: clamp(42px, 5.5vh, 48px);
    --x-modulo-scelta-h: clamp(38px, 4.9vh, 44px);
    --x-modulo-area-h: clamp(3.5rem, 7vh, 5rem);
    --x-col-num: clamp(3.5rem, 6.8vh, 5.5rem);
    --x-filetto-titolo-l: clamp(4.5rem, 7.4vh, 6rem);
    --x-filetto-spazio: clamp(0.85rem, 1.36vh, 1.1rem);
  }
}