/* ===========================================================================
   RD8 — Spacing & layout tokens
   ---------------------------------------------------------------------------
   RD8's Webflow build works in rem steps. Sections breathe (6rem+ gaps on
   desktop); component internals are tighter. Content is centered in a wide
   container with a generous global side gutter.
   =========================================================================== */

:root {
  /* --- Spacing scale ---------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px  — icon gaps, chip internals               */
  --space-2: 0.5rem;    /* 8px                                            */
  --space-3: 0.75rem;   /* 12px                                           */
  --space-4: 1rem;      /* 16px — default grid gap                        */
  --space-5: 1.25rem;   /* 20px — button x-padding                        */
  --space-6: 1.5rem;    /* 24px                                           */
  --space-8: 2rem;      /* 32px — card padding                            */
  --space-10: 2.5rem;
  --space-12: 3rem;     /* 48px — small section padding                   */
  --space-16: 4rem;
  --space-20: 5rem;     /* 80px — hero content gap                        */
  --space-24: 6rem;     /* 96px — section rhythm                          */
  --space-32: 8rem;     /* 128px — large section padding                  */

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 80rem;     /* 1280px content container                 */
  --container-narrow: 48rem;  /* prose / forms                            */
  --gutter: 1.5rem;           /* global side padding (mobile)             */
  --gutter-lg: 2.5rem;        /* global side padding (desktop)            */

  --section-pad-y: 6rem;
  --section-pad-y-sm: 3rem;
  --section-pad-y-hero: 8rem;
}