/* ============================================
   BRIDGEON — Design Tokens
   ============================================ */

:root {

  /* --- Palette colori --- */
  --color-bg-light: #F2F4FF;
  --color-primary: #2958F2;
  --color-dark: #040B63;

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* --- Font --- */
  --font-primary: 'Stack Sans Headline', sans-serif;

  /* --- Tipografia H1 --- */
  --fs-h1: 56px;
  --lh-h1: 60px;
  --fw-h1: 500;

  /* --- Tipografia H2 --- */
  --fs-h2: 40px;
  --lh-h2: 48px;
  --fw-h2: 500;

  /* --- Tipografia H3 --- */
  --fs-h3: 32px;
  --lh-h3: 38px;
  --fw-h3: 500;

  /* --- Tipografia H4 --- */
  --fs-h4: 28px;
  --lh-h4: 34px;
  --fw-h4: 500;

  /* --- Tipografia subtitle --- */
  --fs-subtitle: 24px;
  --lh-subtitle: 32px;
  --fw-subtitle: 500;

  /* --- Tipografia Body 1 e 2 --- */
  --fs-body-1: 16px;
  --lh-body-1: 23px;
  --fw-body-1: 400;
  --fs-body-2: 16px;
  --lh-body-2: 20px;
  --fw-body-2: 400;

  /* --- Tipografia Counters --- */
  --fs-counter: 90px;
  --fw-counter: 500;

  /* --- Container widths --- */
  --content-max-width: 1440px;
  --content-padding-inline: 80px;

  /* --- Spacing scale --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* --- Border radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Transizioni --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-hero: 600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Z-index scale --- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-header: 500;
}


/* --- Responsive --- */
@media (max-width: 1620px) {
  :root {
    --fs-h3: 28px;
    --lh-h3: 36px;

    --content-max-width: 1080px;
  }
}

@media (max-width: 1400px) {
  :root {
    --fs-h1: 50px;
    --lh-h1: 56px;
  }
}

@media (max-width: 1200px) {
  :root {
    --fs-h1: 44px;
    --lh-h1: 50px;

    --fs-h2: 34px;
    --lh-h2: 42px;

    --fs-h3: 25px;
    --lh-h3: 32px;

    --fs-h4: 24px;
    --lh-h4: 30px;

    --fs-body-2: 14px;
    --lh-body-2: 20px;
  }
}

@media (max-width: 1023px) {
  :root {
    --fs-h1: 40px;
    --lh-h1: 48px;

    --fs-h2: 31px;
    --lh-h2: 38px;

    --fs-h3: 23px;
    --lh-h3: 29px;

    --fs-h4: 22px;
    --lh-h4: 28px;

    --fs-body-1: 15px;
    --lh-body-1: 23px;

    --fs-body-2: 15px;
    --lh-body-2: 22px;

    --fs-counter: 64px;

    --content-padding-inline: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 42px;
    --lh-h1: 48px;

    --fs-h2: 30px;
    --lh-h2: 36px;

    --fs-h3: 22px;
    --lh-h3: 28px;

    --fs-h4: 34px;
    --lh-h4: 42px;

    --fs-body-1: 16px;
    --lh-body-1: 25px;

    --fs-body-2: 16px;
    --lh-body-2: 23px;

    --fs-counter: 48px;
  }
}

@media (max-width: 575px) {
  :root {
    --fs-h2: 27px;
    --lh-h2: 35px;

    --fs-h4: 30px;
    --lh-h4: 37px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 32px;
    --lh-h1: 40px;

    --fs-h2: 27px;
    --lh-h2: 32px;

    --fs-h3: 20px;
    --lh-h3: 26px;

    --fs-h4: 25px;
    --lh-h4: 32px;
  }
}

@media (max-width: 420px) {
  :root {
    --fs-h2: 26px;
    --lh-h2: 28px;

    --fs-h3: 19px;
    --lh-h3: 25px;
	
    --fs-h4: 21px;
    --lh-h4: 27px;

    --fs-body-1: 15px;
    --lh-body-1: 24px;

    --fs-body-2: 15px;
    --lh-body-2: 20px;
  }
}