/* =========================================================
   BROOTHER — Espacement, rayons, ombres, largeurs
   ========================================================= */
:root {
  /* — Échelle d'espacement (base 4px) — */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  60px;
  --space-9:  80px;
  --space-10: 120px;   /* respiration entre sections */

  /* — Rayons de bordure — */
  --radius-xs:   4px;    /* carte bière (angles nets) */
  --radius-sm:   8px;
  --radius-md:   12px;   /* cartes surface par défaut */
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;  /* boutons, chips */

  /* — Ombres (portées, jamais d'inner-shadow) — */
  --shadow-card:   0 24px 60px -20px rgba(0, 0, 0, 0.6);   /* survol carte bière */
  --shadow-can:    0 20px 40px rgba(0, 0, 0, 0.35);        /* drop-shadow canette */
  --shadow-can-lg: 0 24px 50px rgba(0, 0, 0, 0.6);         /* canette en boutique */

  /* — Largeurs de contenu — */
  --max-w:        1280px;   /* conteneur principal */
  --max-w-wide:   1440px;   /* blocs split pleine largeur */
  --max-w-prose:  720px;    /* texte long lisible */
  --max-w-narrow: 620px;    /* chapôs, intros centrées */

  /* — Gouttière de conteneur — */
  --gutter: 24px;
}