:root {
  /*
    Scala mobile — frame Figma 700px
    1px di design = --figma-px
    A 700px: 1px | Sotto: proporzionale | Sopra: tetto a 1px
  */
  --figma-mobile-width: 700;
  --figma-px: min(1px, calc(100vw / var(--figma-mobile-width)));

  /* Colori brand */
  --color-nolves-blue: #27357e;
  --color-white: #ffffff;
  --color-oxford-blue: #364153;
  --color-pale-sky: #6a7282;
  --color-athens-gray: #f3f4f6;
  --color-athens-gray-2: #f9fafb;
  --color-border-gray: #cbcfd6;
  --color-ebony: #101828;
  --color-nuovo: #29b2e7;
  --color-usato: #52ae32;
  --color-service: #e30613;

  /* Tipografia */
  --font-body: "avenir-next-lt-pro", sans-serif;
  --font-heading: "gotham", sans-serif;

  /* Tipografia mobile — valori Figma scalati */
  --fs-32: calc(var(--figma-px) * 32);
  --fs-32-min: min(32px, 4.571vw);
  --lh-32-body: calc(var(--figma-px) * 41.6);

  --fs-48: calc(var(--figma-px) * 48);
  --fs-48-min: min(48px, 6.857vw);

  --fs-22: calc(var(--figma-px) * 22);
  --fs-22-min: min(22px, 3.143vw);
  --lh-22: calc(var(--figma-px) * 28.6);

  --fs-24: calc(var(--figma-px) * 24);
  --fs-24-min: min(24px, 3.429vw);

  --fs-25: calc(var(--figma-px) * 25);
  --fs-25-min: min(25px, 3.571vw);
  --lh-25: calc(var(--figma-px) * 30);

  --fs-20: calc(var(--figma-px) * 20);
  --fs-20-min: min(20px, 2.857vw);

  /* Tipografia desktop — valori fissi Figma */
  --fs-body-desktop: 14px;
  --lh-body-desktop: 18.2px;
  --fs-heading-section-desktop: 24px;
  --lh-heading-section-desktop: 1.1;
  --fs-chiamata-title-desktop: 24px;
  --fs-cta-desktop: 14px;
  --lh-cta-desktop: 20px;
  --fw-cta-desktop: 600;

  /* Spaziatura mobile */
  --gap-16: calc(var(--figma-px) * 16);
  --gap-32: calc(var(--figma-px) * 32);
  --gap-52: calc(var(--figma-px) * 52);
  --gap-90: calc(var(--figma-px) * 90);

  /* Ritmo verticale tra sezioni (mobile) */
  --section-gap: var(--gap-52);
  --section-gap-tight: var(--gap-32);

  /* Spacer block — default globali */
  --spacer-default-height-mobile: 40px;
  --spacer-default-height-desktop: 52px;

  /* Componenti condivisi mobile */
  --shadow-card: 0 calc(var(--figma-px) * 3.56) calc(var(--figma-px) * 7.12) calc(var(--figma-px) * -3.56) rgb(0 0 0 / 10%),
    0 calc(var(--figma-px) * 7.12) calc(var(--figma-px) * 10.69) calc(var(--figma-px) * -1.78) rgb(0 0 0 / 10%);
  --border-card: calc(var(--figma-px) * 0.48) solid var(--color-border-gray);
  --radius-card: calc(var(--figma-px) * 13.92);

  --btn-min-h: calc(var(--figma-px) * 95.4);
  --btn-radius: calc(var(--figma-px) * 31.81);
  --btn-padding-inline: calc(var(--figma-px) * 24);
  --btn-padding-block: calc(var(--figma-px) * 24);
  --btn-font-size: var(--fs-32);
  --btn-font-size-min: var(--fs-32-min);
  --btn-line-height: calc(var(--figma-px) * 48);

  /* Layout — mobile first */
  --container-max-width: 700px;
  --container-padding-x: calc(var(--figma-px) * 16);

  /* Header */
  --header-padding-x: calc(var(--figma-px) * 17);
  --header-top-padding-y: calc(var(--figma-px) * 40);
  --header-nav-padding-y: calc(var(--figma-px) * 40);
  --header-border-color: var(--color-white);
  --header-logo-height: calc(var(--figma-px) * 46);
  --header-menu-size: calc(var(--figma-px) * 46);
  --header-menu-icon-size: calc(var(--figma-px) * 32);
  --header-nav-font-size: calc(var(--figma-px) * 32);
  --header-nav-line-height: 1.2;
}

@media (min-width: 768px) {
  :root {
    --container-max-width: 1280px;
    --container-padding-x: clamp(40px, 6vw, 120px);

    /* Ombra card — standard card sedi (Figma desktop) */
    --shadow-card: 0 2.16px 4.31px -2.16px rgb(0 0 0 / 10%),
      0 4.31px 6.47px -1.08px rgb(0 0 0 / 10%);

    /* Larghezza colonna editoriale (hero, intro, banner overlay, header sezioni) */
    --content-max-width-editorial: 947px;

    /* Newsletter — colonna testo/form (Figma desktop) */
    --content-max-width-newsletter: 587px;

    /* Ritmo verticale tra sezioni (desktop) */
    --section-gap: 55px;
    --section-gap-tight: 32px;
  }
}