/* Emerald — spazi, griglia, forme, livelli */
:root{
  /* Scala spazi (ricondotta dai valori del mock-up: 4·6·8·10/12·16·20·26·34·40/44·60·90·110·150) */
  --space-1:4px; /* @kind spacing */
  --space-2:6px; /* @kind spacing */
  --space-3:8px; /* @kind spacing */
  --space-4:12px; /* @kind spacing */
  --space-5:16px; /* @kind spacing */
  --space-6:20px; /* @kind spacing */
  --space-7:26px; /* @kind spacing */
  --space-8:34px; /* @kind spacing */
  --space-9:40px; /* @kind spacing */
  --space-10:60px; /* @kind spacing */
  --space-11:90px; /* @kind spacing */
  --space-12:110px; /* @kind spacing */
  --space-13:150px; /* @kind spacing */

  /* Sezioni */
  --section-y-s:var(--space-11); /* @kind spacing */   /* 90 */
  --section-y-m:var(--space-12); /* @kind spacing */   /* 110 */
  --section-y-l:var(--space-13); /* @kind spacing */   /* 150 */

  /* Valori per tablet (768–1023) e mobile (≤767): usati nelle media query di components/components.css */
  --section-y-s-tablet:72px; /* @kind spacing */
  --section-y-m-tablet:90px; /* @kind spacing */
  --section-y-l-tablet:120px; /* @kind spacing */
  --section-y-s-mobile:56px; /* @kind spacing */
  --section-y-m-mobile:72px; /* @kind spacing */
  --section-y-l-mobile:96px; /* @kind spacing */

  /* Griglia */
  --container:1296px; /* @kind spacing */
  --gutter:48px; /* @kind spacing */            /* desktop ≥1024 */
  --gutter-tablet:32px; /* @kind spacing */     /* 768–1023 */
  --gutter-mobile:20px; /* @kind spacing */     /* <768 */
  --grid-gap:40px; /* @kind spacing */
  --grid-gap-l:60px; /* @kind spacing */
  --grid-gap-mobile:32px; /* @kind spacing */
  --grid-gap-l-mobile:40px; /* @kind spacing */

  /* Larghezze di lettura */
  --measure-wide:1200px; /* @kind spacing */
  --measure-claim:880px; /* @kind spacing */
  --measure-text:620px; /* @kind spacing */
  --measure-copy:520px; /* @kind spacing */
  --measure-intro:440px; /* @kind spacing */
  --measure-aside:330px; /* @kind spacing */

  /* Forme */
  --radius-none:0; /* @kind radius */
  --radius-media:5px; /* @kind radius */       /* media in ingresso, poi 0 */
  --radius-control:4.5px; /* @kind radius */   /* frecce carosello 27×27 */
  --radius-pill:100px; /* @kind radius */
  --radius-round:50%; /* @kind radius */
  --border:1px; /* @kind radius */

  /* Dimensioni ricorrenti */
  --header-h:74px; /* @kind spacing */
  --header-h-mobile:64px; /* @kind spacing */
  --logo-h:34px; /* @kind spacing */
  --logo-h-mobile:28px; /* @kind spacing */
  --logo-h-footer:32px; /* @kind spacing */
  --dot:6px; /* @kind spacing */
  --arrow-btn:27px; /* @kind spacing */

  /* Livelli */
  --z-header:200; /* @kind other */
  --z-menu:300; /* @kind other */

  /* Ombre: il sistema non usa ombre. Profondità = sfocatura + sfumatura. */
  --shadow-none:none; /* @kind shadow */
  --blur-header:blur(16px) saturate(140%); /* @kind other */

  /* Punti di rottura (riferimento per media query) */
  --bp-mobile:767px; /* @kind other */
  --bp-tablet:1023px; /* @kind other */
  --bp-wide:1296px; /* @kind other */
}