/*
  Direzione 1 "Essenziale" - token.
  Monocromatico con un accento: bianco e grigi neutri, il solo rosso del marchio sulle azioni.
  Ogni colore, misura e durata della pagina vive qui. Le variabili --x- sono della firma
  e non sono portabili.
*/
:root {
  /* colore: la palette chiusa del brief */
  --fondo: #FFFFFF;
  --fondo-2: #F3F3F2;
  --fondo-3: #141414;
  --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-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;

  /* cromo di bozza */
  --altezza-fascia: 30px;
  --x-nota-pad: 0.4rem 0.55rem;

  /* 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-campo-h: 52px;
  --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: 15rem;
  --x-foto-metodo-l: 42%;
  --x-foto-preventivo-h: 12rem;
  --x-chevron: 0.5rem;
}

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

@media (min-width: 1100px) {
  :root {
    --altezza-fascia: 32px;
    --x-fs-fascia: 0.75rem;
    --x-tracking-fascia: 0.08em;
    --x-altezza-testata: 78px;
    --x-logo-h: 24px;
    --x-logo-h-piede: 30px;
    --x-scheda-pad: 2.75rem;
    --x-foto-apertura-h: min(74vh, 46rem);
    --x-foto-servizi-h: min(72vh, 40rem);
    --x-foto-preventivo-h: min(78vh, 44rem);
    --x-col-num: 5.5rem;
    --x-filetto-titolo-l: 6rem;
  }
}