/* ===========================================================================
   SPACING — 8px base, 4px half-step. Gentle scale.
   Section rhythm constant = 80px.
   =========================================================================== */
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-section: 80px;   /* universal band rhythm (collapses to ~48px mobile) */

  /* Layout */
  --container-max: 1366px;
  --gutter: 24px;          /* grid gutter desktop (16px tablet/mobile)         */

  /* --- Border radius ------------------------------------------------------- */
  --radius-none: 0px;      /* chevrons, full-bleed heroes, marquee            */
  --radius-xs: 2px;        /* secondary chips, sale-tag pills                 */
  --radius-sm: 3px;        /* small secondary CTA                             */
  --radius-md: 4px;        /* buttons, inputs                                 */
  --radius-lg: 8px;        /* badge pills, category-icon cards, FAQ rows      */
  --radius-xl: 16px;       /* product cards, pricing tiers, photo frames      */
  --radius-pill: 9999px;   /* sub-nav tabs, search pill, filter chips         */
}