:root {
  /* Colori / pieni / bianco */
  --colori-pieni-bianco-50: #FFFFFF;
  --colori-pieni-bianco-100: #FDFCFB;
  --colori-pieni-bianco-200: #FBF9F7;
  --colori-pieni-bianco-300: #F8F6F3;
  --colori-pieni-bianco-400: #F4F1ED;
  --colori-pieni-bianco-default: #F0EEEA;
  --colori-pieni-bianco-600: #EAE7E3;
  --colori-pieni-bianco-700: #E3DFDA;
  --colori-pieni-bianco-800: #DBD6D1;
  --colori-pieni-bianco-900: #D2CCC6;

  /* Colori / pieni / blu */
  --colori-pieni-blu-50: #BEC2CA;
  --colori-pieni-blu-100: #ABB1BA;
  --colori-pieni-blu-200: #868E9C;
  --colori-pieni-blu-300: #616B7D;
  --colori-pieni-blu-400: #3B495F;
  --colori-pieni-blu-default: #162640;
  --colori-pieni-blu-600: #122036;
  --colori-pieni-blu-700: #0F1A2C;
  --colori-pieni-blu-800: #0B1421;
  --colori-pieni-blu-900: #080E17;

  /* Colori / pieni / rosso */
  --colori-pieni-rosso-50: #F2CCD2;
  --colori-pieni-rosso-100: #EFBEC5;
  --colori-pieni-rosso-200: #E8A1AB;
  --colori-pieni-rosso-300: #E08491;
  --colori-pieni-rosso-400: #D96777;
  --colori-pieni-rosso-default: #D24A5D;
  --colori-pieni-rosso-600: #B03E4E;
  --colori-pieni-rosso-700: #8F323F;
  --colori-pieni-rosso-800: #6D2630;
  --colori-pieni-rosso-900: #4C1B21;

  /* Colori / pieni / nero */
  --colori-pieni-nero-50: #050101;
  --colori-pieni-nero-100: #070202;
  --colori-pieni-nero-200: #0A0303;
  --colori-pieni-nero-300: #0C0303;
  --colori-pieni-nero-400: #0E0404;
  --colori-pieni-nero-default: #0F0404;
  --colori-pieni-nero-600: #140707;
  --colori-pieni-nero-700: #1A0C0C;
  --colori-pieni-nero-800: #231414;
  --colori-pieni-nero-900: #2A1818;

  /* Colori / pieni / grigio */
  --colori-pieni-grigio-50: #F6F4F1;
  --colori-pieni-grigio-100: #EDEAE6;
  --colori-pieni-grigio-200: #E2DED9;
  --colori-pieni-grigio-300: #D6D1CB;
  --colori-pieni-grigio-400: #BFB9B2;
  --colori-pieni-grigio-default: #A8A29B;
  --colori-pieni-grigio-600: #8F8982;
  --colori-pieni-grigio-700: #6F6963;
  --colori-pieni-grigio-800: #4E4945;
  --colori-pieni-grigio-900: #2F2A27;

  /* Colori / opacizzati / bianco (base #F0EEEA) */
  --colori-opacizzati-bianco-10: rgba(240, 238, 234, 0.1);
  --colori-opacizzati-bianco-20: rgba(240, 238, 234, 0.2);
  --colori-opacizzati-bianco-30: rgba(240, 238, 234, 0.3);
  --colori-opacizzati-bianco-40: rgba(240, 238, 234, 0.4);
  --colori-opacizzati-bianco-50: rgba(240, 238, 234, 0.5);
  --colori-opacizzati-bianco-60: rgba(240, 238, 234, 0.6);
  --colori-opacizzati-bianco-70: rgba(240, 238, 234, 0.7);
  --colori-opacizzati-bianco-80: rgba(240, 238, 234, 0.8);
  --colori-opacizzati-bianco-90: rgba(240, 238, 234, 0.9);

  /* Colori / opacizzati / blu (base #162640) */
  --colori-opacizzati-blu-10: rgba(22, 38, 64, 0.1);
  --colori-opacizzati-blu-20: rgba(22, 38, 64, 0.2);
  --colori-opacizzati-blu-30: rgba(22, 38, 64, 0.3);
  --colori-opacizzati-blu-40: rgba(22, 38, 64, 0.4);
  --colori-opacizzati-blu-50: rgba(22, 38, 64, 0.5);
  --colori-opacizzati-blu-60: rgba(22, 38, 64, 0.6);
  --colori-opacizzati-blu-70: rgba(22, 38, 64, 0.7);
  --colori-opacizzati-blu-80: rgba(22, 38, 64, 0.8);
  --colori-opacizzati-blu-90: rgba(22, 38, 64, 0.9);

  /* Colori / opacizzati / rosso (base #D24A5D) */
  --colori-opacizzati-rosso-10: rgba(210, 74, 93, 0.1);
  --colori-opacizzati-rosso-20: rgba(210, 74, 93, 0.2);
  --colori-opacizzati-rosso-30: rgba(210, 74, 93, 0.3);
  --colori-opacizzati-rosso-40: rgba(210, 74, 93, 0.4);
  --colori-opacizzati-rosso-50: rgba(210, 74, 93, 0.5);
  --colori-opacizzati-rosso-60: rgba(210, 74, 93, 0.6);
  --colori-opacizzati-rosso-70: rgba(210, 74, 93, 0.7);
  --colori-opacizzati-rosso-80: rgba(210, 74, 93, 0.8);
  --colori-opacizzati-rosso-90: rgba(210, 74, 93, 0.9);

  /* Colori / opacizzati / nero (base #0F0404) */
  --colori-opacizzati-nero-10: rgba(15, 4, 4, 0.1);
  --colori-opacizzati-nero-20: rgba(15, 4, 4, 0.2);
  --colori-opacizzati-nero-30: rgba(15, 4, 4, 0.3);
  --colori-opacizzati-nero-40: rgba(15, 4, 4, 0.4);
  --colori-opacizzati-nero-50: rgba(15, 4, 4, 0.5);
  --colori-opacizzati-nero-60: rgba(15, 4, 4, 0.6);
  --colori-opacizzati-nero-70: rgba(15, 4, 4, 0.7);
  --colori-opacizzati-nero-80: rgba(15, 4, 4, 0.8);
  --colori-opacizzati-nero-90: rgba(15, 4, 4, 0.9);

  /* Colori / opacizzati / grigio (base #A8A29B) */
  --colori-opacizzati-grigio-10: rgba(168, 162, 155, 0.1);
  --colori-opacizzati-grigio-20: rgba(168, 162, 155, 0.2);
  --colori-opacizzati-grigio-30: rgba(168, 162, 155, 0.3);
  --colori-opacizzati-grigio-40: rgba(168, 162, 155, 0.4);
  --colori-opacizzati-grigio-50: rgba(168, 162, 155, 0.5);
  --colori-opacizzati-grigio-60: rgba(168, 162, 155, 0.6);
  --colori-opacizzati-grigio-70: rgba(168, 162, 155, 0.7);
  --colori-opacizzati-grigio-80: rgba(168, 162, 155, 0.8);
  --colori-opacizzati-grigio-90: rgba(168, 162, 155, 0.9);
}

/* =====================================================
   GRADIENTI — riutilizzabili in tutto il sito
   ===================================================== */
:root {
  --gradient-aurora: linear-gradient(
    to bottom,
    var(--colori-pieni-rosso-default),
    var(--colori-pieni-blu-default)
  );

  /* Bottone/etichetta variante "gradiente" — Figma Sito-DS, node 713:8980 */
  --gradient-brand:       linear-gradient(111deg, var(--colori-pieni-blu-default) 25%, var(--colori-pieni-rosso-default) 100%);
  --gradient-brand-hover: linear-gradient(249deg, var(--colori-pieni-blu-default) 25%, var(--colori-pieni-rosso-default) 100%);

  /* Sfondo hero blog — Figma Sito-DS, node 868:2741 */
  --gradient-hero: linear-gradient(180deg, var(--colori-pieni-blu-default) 0%, var(--colori-pieni-rosso-default) 100%);
}

/* =====================================================
   DESIGN SYSTEM – SCALA SPACING
   (Numberi/scala di Figma — stessa scala usata per gap,
   padding, margin e border-radius)
   ===================================================== */

:root {
  --spacing-0: 0px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-144: 144px;
  --spacing-160: 160px;
  --spacing-192: 192px;
  --spacing-200: 200px;
  --spacing-224: 224px;
  --spacing-240: 240px;
  --spacing-256: 256px;
  --spacing-320: 320px;
  --spacing-360: 360px;
  --spacing-384: 384px;
  --spacing-448: 448px;
  --spacing-512: 512px;
  --spacing-768: 768px;
  --spacing-1024: 1024px;
}

/* =====================================================
   DESIGN SYSTEM – SCALA TIPOGRAFICA (nuovo sistema)
   Breakpoint: Mobile (0-767) | Tablet (768-1079) | Desktop (1080-2559) | Display (2560-∞)
   ===================================================== */

:root {
  /* Font families */
  --font-heading: 'Lota Grotesque', sans-serif;
  --font-body: 'Google Sans Flex', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Mobile (default) --- */
  --h1-size: 64px;   --h1-line: 64px;
  --h2-size: 48px;   --h2-line: 56px;
  --h3-size: 40px;   --h3-line: 48px;
  --h4-size: 36px;   --h4-line: 40px;
  --h5-size: 28px;   --h5-line: 32px;
  --h6-size: 24px;   --h6-line: 32px;

  --body-lg-size: 20px; --body-lg-line: 24px;
  --body-md-size: 18px; --body-md-line: 24px;
  --body-sm-size: 16px; --body-sm-line: 20px;
  --caption-size: 12px;  --caption-line: 16px;

  --num-lg-size: 96px;
  --num-md-size: 72px;
  --num-sm-size: 48px;
  --num-xs-size: 24px;
}

/* --- Tablet: 768-1079 --- */
@media (min-width: 768px) {
  :root {
    --h1-size: 112px; --h1-line: 112px;
    --h2-size: 72px;  --h2-line: 96px;
    --h3-size: 64px;  --h3-line: 72px;
    --h4-size: 48px;  --h4-line: 56px;
    --h5-size: 32px;  --h5-line: 40px;
    --h6-size: 24px;  --h6-line: 32px;

    --body-lg-size: 20px; --body-lg-line: 24px;
    --body-md-size: 18px; --body-md-line: 24px;
    --body-sm-size: 16px; --body-sm-line: 20px;
    --caption-size: 12px;  --caption-line: 16px;

    --num-lg-size: 160px;
    --num-md-size: 96px;
    --num-sm-size: 72px;
    --num-xs-size: 28px;
  }
}

@media(min-width: 1081px){
  :root{
   --h1-size: 128px; --h1-line: 128px;
    --h2-size: 96px;  --h2-line: 112px;
    --h3-size: 72px;  --h3-line: 80px;
    --h4-size: 48px;  --h4-line: 56px;
    --h5-size: 32px;  --h5-line: 40px;
    --h6-size: 24px;  --h6-line: 32px;

    --body-lg-size: 20px; --body-lg-line: 24px;
    --body-md-size: 18px; --body-md-line: 24px;
    --body-sm-size: 16px; --body-sm-line: 20px;
    --caption-size: 12px;  --caption-line: 16px;

    --num-lg-size: 224px;
    --num-md-size: 96px;
    --num-sm-size: 72px;
    --num-xs-size: 36px;
}}

/* --- Desktop: 1080-2559 --- */
@media (min-width: 1300px) and (max-width:1819px) {
  :root {
    --h1-size: 144px; --h1-line: 144px;
    --h2-size: 96px;  --h2-line: 112px;
    --h3-size: 72px;  --h3-line: 80px;
    --h4-size: 48px;  --h4-line: 56px;
    --h5-size: 32px;  --h5-line: 40px;
    --h6-size: 24px;  --h6-line: 32px;

    --body-lg-size: 20px; --body-lg-line: 24px;
    --body-md-size: 18px; --body-md-line: 24px;
    --body-sm-size: 16px; --body-sm-line: 20px;
    --caption-size: 12px;  --caption-line: 16px;

    --num-lg-size: 224px;
    --num-md-size: 112px;
    --num-sm-size: 72px;
    --num-xs-size: 36px;
  }
}

@media (min-width: 1820px) and (max-width: 2559px) {
  :root {
    --h1-size: 192px; --h1-line: 192px;
    --h2-size: 128px;  --h2-line: 144px;
    --h3-size: 80px;  --h3-line: 96px;
    --h4-size: 72px;  --h4-line: 80px;
    --h5-size: 48px;  --h5-line: 56px;
    --h6-size: 32px;  --h6-line: 36px;

    --body-lg-size: 28px; --body-lg-line: 36px;
    --body-md-size: 20px; --body-md-line: 24px;
    --body-sm-size: 18px; --body-sm-line: 24px;
    --caption-size: 14px;  --caption-line: 20px;

    --num-lg-size: 256px;
    --num-md-size: 160px;
    --num-sm-size: 112px;
    --num-xs-size: 64px;
  }
}

/* --- Display: 2560+ --- */
@media (min-width: 2560px) {
  :root {
    --h1-size: 256px; --h1-line: 256px;
    --h2-size: 160px; --h2-line: 192px;
    --h3-size: 128px; --h3-line: 144px;
    --h4-size: 112px; --h4-line: 128px;
    --h5-size: 64px;  --h5-line: 72px;
    --h6-size: 40px;  --h6-line: 48px;

    --body-lg-size: 48px; --body-lg-line: 56px;
    --body-md-size: 28px; --body-md-line: 32px;
    --body-sm-size: 28px; --body-sm-line: 32px;
    --caption-size: 16px; --caption-line: 20px;

    --num-lg-size: 448px;
    --num-md-size: 224px;
    --num-sm-size: 160px;
    --num-xs-size: 72px;
  }
}

/* =====================================================
   DESIGN SYSTEM – SHADOW / RADIUS / MOTION / CONTAINER
   (recuperate da c93b1df, mancanti da tempo — vedi memoria)
   ===================================================== */

:root {
  /* Ombra leggera riutilizzabile per le card su mobile (Caso Studio,
     Recensioni) — vedi components.css. */
  --mm-shadow-card: 0 0 25px 0 rgba(22, 38, 64, 0.05);

  --mm-duration-fast: 150ms;
  --mm-duration:      300ms;

  --mm-radius-sm:   4px;
  --mm-radius-md:   8px;
  --mm-radius-lg:   16px;
  --mm-radius-xl:   24px;
  --mm-radius-full: 999px;

  /* Mobile (default) */
  --mm-container-pad: 20px;
}

/* Tablet + Desktop: 768-2559 */
@media (min-width: 768px) {
  :root {
    --mm-container-pad: 40px;
  }
}

/* Display: 2560+ */
@media (min-width: 2560px) {
  :root {
    --mm-container-pad: 80px;
  }
}


:root{
   --mm-hero-blur: min(125px, 8svh);
    --mm-hero-ext:  calc(var(--mm-hero-blur) * 2.4);
    --sfondo-hero: radial-gradient(
        220% 220% at 100% var(--mm-hero-ext),
        var(--colori-pieni-rosso-default, #D24A5D) -10%,
        var(--colori-pieni-blu-default, #162640) 50%,
        var(--colori-pieni-blu-default, #162640) 100%
    );
  --sfondo-piccolo: radial-gradient(
  220% 220% at 100% 0%,
  var(--colori-pieni-rosso-default, #D24A5D) -10%,
  var(--colori-pieni-blu-default, #162640) 60%,
  var(--colori-pieni-blu-default, #162640) 100%
);
}