/* Spacing scale + page rhythm from the mockup */
:root {
  --space-3xs: 0.5rem;   /*  8 */
  --space-2xs: 0.75rem;  /* 12 */
  --space-xs: 1rem;      /* 16 */
  --space-sm: 1.5rem;    /* 24 */
  --space-md: 2.25rem;   /* 36 */
  --space-lg: 3rem;      /* 48 */
  --space-xl: 4rem;      /* 64 */
  --space-2xl: 5rem;     /* 80 */
  --space-3xl: 6rem;     /* 96 */

  --page-x: 80px;
  --section-y: 96px;
  --container-max: 1160px;  /* global content cap — backgrounds stay full-bleed */
  --content-max: 1120px;
}

@media (max-width: 900px) {
  :root {
    --page-x: 40px;
    --section-y: 72px;
  }
}

@media (max-width: 560px) {
  :root {
    --page-x: 22px;
    --section-y: 56px;
  }
}