:root {
  /* Spacing Scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Common Gaps */
  --gap-xs: var(--space-8);
  --gap-sm: var(--space-12);
  --gap-md: var(--space-16);
  --gap-lg: var(--space-24);
  --gap-xl: var(--space-32);
  --gap-2xl: var(--space-48);
  --gap-3xl: var(--space-64);

  /* Padding */
  --pad-xs: var(--space-8);
  --pad-sm: var(--space-12);
  --pad-md: var(--space-16);
  --pad-lg: var(--space-24);
  --pad-xl: var(--space-32);

  /* Border Radius */
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-full: 999px;

  /* Layout */
  --max-width: 1200px;
  --gutter-desktop: 32px;
  --gutter-mobile: 20px;
}