/* ==========================================================================
   DESIGN TOKENS — ESPACEMENT & DIMENSIONS
   Grilles, gaps, marges, padding, border-radius
   ========================================================================== */

:root {
  /* Échelle d'espacement (base 4px) */
  --space-0:    0;
  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* Espacement section (fluid) */
  --section-gap:  clamp(1.5rem, 2.5vw, 2.5rem);
  --section-y:    clamp(2.25rem, 3.5vw, 3.5rem);

  /* Conteneurs */
  --container-xs:   30rem;    /* 480px */
  --container-sm:   40rem;    /* 640px */
  --container-md:   48rem;    /* 768px */
  --container-lg:   64rem;    /* 1024px */
  --container-xl:   1200px;   /* 1200px */
  --container-2xl:  90rem;    /* 1440px */
  --container-pad:  clamp(1rem, 3vw, 2rem);

  /* Border radius */
  --radius-xs:   0.25rem;    /*  4px */
  --radius-sm:   0.5rem;     /*  8px */
  --radius-md:   0.75rem;    /* 12px */
  --radius-lg:   1rem;       /* 16px */
  --radius-xl:   1.25rem;    /* 20px */
  --radius-2xl:  1.5rem;     /* 24px */
  --radius-3xl:  2rem;       /* 32px */
  --radius-full: 9999px;

  /* Bento Grid */
  --bento-gap:         clamp(0.75rem, 1.5vw, 1.25rem);
  --bento-row-min:     180px;
  --bento-col-min:     280px;
  --bento-columns:     4;

  /* Z-index système */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    100;
  --z-header:    200;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     1500;

  /* Dimensions structurelles */
  --header-height: 8rem; /* ~128px (logo 88px + padding vertical fluide) */
}