/* ==========================================================================
   Design Tokens: Spacing
   8px base unit grid — consistent spacing across all components
   ========================================================================== */

:root {
  /* Base unit */
  --space-unit: 0.5rem; /* 8px */

  /* Scale */
  --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 */

  /* Semantic spacing */
  --space-component-gap: var(--space-4);
  --space-section-gap: var(--space-16);
  --space-page-gutter: var(--space-6);
  --space-card-padding: var(--space-6);
  --space-inline-padding: var(--space-4);

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1440px;
  --container-2xl: 1600px;
  --container-max-width: 1440px;

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;
}

@media (min-width: 1024px) {
  :root {
    --space-page-gutter: var(--space-8);
  }
}

@media (min-width: 1280px) {
  :root {
    --space-page-gutter: var(--space-12);
  }
}