:root {
  /* General spacing scale based on 4px increments */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* Base Unit */
  --base-spacing-unit: 1rem; /* 16px */

  /* Container Widths */
  --container-width-sm: 40rem; /* 640px */
  --container-width-md: 60rem; /* 960px */
  --container-width-lg: 80rem; /* 1280px */

  /* Page Children Spacing */
  --page-element-spacing-sm: calc(var(--base-spacing-unit)); /* 16px */
  --page-element-spacing-md: calc(var(--base-spacing-unit) * 2); /* 32px */
  --page-element-spacing-lg: calc(var(--base-spacing-unit) * 3); /* 48px */

  /* Section Children Spacing */
  --section-spacing-none: 0; /* 0px */
  --section-spacing-sm: calc(var(--base-spacing-unit) * 0.5); /* 8px */
  --section-spacing-md: var(--base-spacing-unit); /* 16px */
  --section-spacing-lg: calc(var(--base-spacing-unit) * 1.5); /* 24px */
  --section-spacing-xl: calc(var(--base-spacing-unit) * 2); /* 32px */

  /* Component Padding */
  --component-padding-none: 0; /* 0px */
  --component-padding-sm: calc(var(--base-spacing-unit) * 0.25); /* 4px */
  --component-padding-md: calc(var(--base-spacing-unit) * 0.5); /* 8px */
  --component-padding-lg: var(--base-spacing-unit); /* 16px */
  --component-padding-xl: calc(var(--base-spacing-unit) * 1.5); /* 24px */
  --component-padding-2xl: calc(var(--base-spacing-unit) * 2); /* 32px */

  /* Component Children Spacing */
  --component-spacing-none: 0; /* 0px */
  --component-spacing-sm: calc(var(--base-spacing-unit) * 0.25); /* 4px */
  --component-spacing-md: calc(var(--base-spacing-unit) * 0.5); /* 8px */
  --component-spacing-lg: var(--base-spacing-unit); /* 16px */
  --component-spacing-xl: calc(var(--base-spacing-unit) * 1.5); /* 24px */
}