// Spacing system - 8px base grid
:root {
  --spacing-0: 0;
  --spacing-0-5: 0.125rem; // 2px
  --spacing-1: 0.25rem;  // 4px
  --spacing-2: 0.5rem;   // 8px
  --spacing-3: 0.75rem;  // 12px
  --spacing-4: 1rem;     // 16px
  --spacing-5: 1.25rem;  // 20px
  --spacing-6: 1.5rem;   // 24px
  --spacing-8: 2rem;     // 32px
  --spacing-10: 2.5rem;  // 40px
  --spacing-12: 3rem;    // 48px
  --spacing-16: 4rem;    // 64px
  --spacing-20: 5rem;    // 80px
  --spacing-24: 6rem;    // 96px

  // Semantic spacing
  --gap-xs: var(--spacing-1);
  --gap-sm: var(--spacing-2);
  --gap-md: var(--spacing-4);
  --gap-lg: var(--spacing-6);
  --gap-xl: var(--spacing-8);
}

/**
 * @section Gap Utilities
 */

/** @public No gap */
.gap-0 { gap: var(--spacing-0); }

/** @public 4px gap */
.gap-1 { gap: var(--spacing-1); }

/** @public 8px gap */
.gap-2 { gap: var(--spacing-2); }

/** @public 12px gap */
.gap-3 { gap: var(--spacing-3); }

/** @public 16px gap */
.gap-4 { gap: var(--spacing-4); }

/** @public 24px gap */
.gap-6 { gap: var(--spacing-6); }

/** @public 32px gap */
.gap-8 { gap: var(--spacing-8); }

/** @public Extra small gap */
.gap-xs { gap: var(--gap-xs); }

/** @public Small gap */
.gap-sm { gap: var(--gap-sm); }

/** @public Medium gap */
.gap-md { gap: var(--gap-md); }

/** @public Large gap */
.gap-lg { gap: var(--gap-lg); }

/** @public Extra large gap */
.gap-xl { gap: var(--gap-xl); }

/**
 * @section Padding Utilities
 */

/** @public No padding */
.p-0 { padding: var(--spacing-0); }

/** @public 4px padding all sides */
.p-1 { padding: var(--spacing-1); }

/** @public 8px padding all sides */
.p-2 { padding: var(--spacing-2); }

/** @public 12px padding all sides */
.p-3 { padding: var(--spacing-3); }

/** @public 16px padding all sides */
.p-4 { padding: var(--spacing-4); }

/** @public 24px padding all sides */
.p-6 { padding: var(--spacing-6); }

/** @public 32px padding all sides */
.p-8 { padding: var(--spacing-8); }

/**
 * @section Horizontal/Vertical Padding
 */

/** @public No horizontal padding */
.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }

/** @public 4px horizontal padding */
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }

/** @public 8px horizontal padding */
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }

/** @public 12px horizontal padding */
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }

/** @public 16px horizontal padding */
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }

/** @public 24px horizontal padding */
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

/** @public 32px horizontal padding */
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

/** @public No vertical padding */
.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }

/** @public 4px vertical padding */
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }

/** @public 8px vertical padding */
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }

/** @public 12px vertical padding */
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }

/** @public 16px vertical padding */
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

/** @public 24px vertical padding */
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

/** @public 32px vertical padding */
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

/** @public 40px vertical padding */
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }

/** @public 48px vertical padding */
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }

/** @public 64px vertical padding */
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }

/**
 * @section Individual Side Padding
 */

/** @public 8px top padding */
.pt-2 { padding-top: var(--spacing-2); }

/** @public 16px top padding */
.pt-4 { padding-top: var(--spacing-4); }

/** @public 24px top padding */
.pt-6 { padding-top: var(--spacing-6); }

/** @public 32px top padding */
.pt-8 { padding-top: var(--spacing-8); }

/** @public 48px top padding */
.pt-12 { padding-top: var(--spacing-12); }

/** @public 8px bottom padding */
.pb-2 { padding-bottom: var(--spacing-2); }

/** @public 16px bottom padding */
.pb-4 { padding-bottom: var(--spacing-4); }

/** @public 24px bottom padding */
.pb-6 { padding-bottom: var(--spacing-6); }

/** @public 32px bottom padding */
.pb-8 { padding-bottom: var(--spacing-8); }

/** @public 48px bottom padding */
.pb-12 { padding-bottom: var(--spacing-12); }

/** @public 8px left padding */
.pl-2 { padding-left: var(--spacing-2); }

/** @public 16px left padding */
.pl-4 { padding-left: var(--spacing-4); }

/** @public 24px left padding */
.pl-6 { padding-left: var(--spacing-6); }

/** @public 32px left padding */
.pl-8 { padding-left: var(--spacing-8); }

/** @public 8px right padding */
.pr-2 { padding-right: var(--spacing-2); }

/** @public 16px right padding */
.pr-4 { padding-right: var(--spacing-4); }

/** @public 24px right padding */
.pr-6 { padding-right: var(--spacing-6); }

/** @public 32px right padding */
.pr-8 { padding-right: var(--spacing-8); }

/**
 * @section Margin Utilities
 */

/** @public No margin */
.m-0 { margin: var(--spacing-0); }

/** @public 4px margin all sides */
.m-1 { margin: var(--spacing-1); }

/** @public 8px margin all sides */
.m-2 { margin: var(--spacing-2); }

/** @public 12px margin all sides */
.m-3 { margin: var(--spacing-3); }

/** @public 16px margin all sides */
.m-4 { margin: var(--spacing-4); }

/** @public 24px margin all sides */
.m-6 { margin: var(--spacing-6); }

/** @public 32px margin all sides */
.m-8 { margin: var(--spacing-8); }

/** @public Auto margin - centers elements */
.m-auto { margin: auto; }

/** @public Auto horizontal margin - centers block */
.mx-auto { margin-left: auto; margin-right: auto; }

/** @public Auto vertical margin */
.my-auto { margin-top: auto; margin-bottom: auto; }

/**
 * @section Horizontal/Vertical Margin
 */

/** @public No horizontal margin */
.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }

/** @public 4px horizontal margin */
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }

/** @public 8px horizontal margin */
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }

/** @public 12px horizontal margin */
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }

/** @public 16px horizontal margin */
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }

/** @public 24px horizontal margin */
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }

/** @public 32px horizontal margin */
.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }

/** @public No vertical margin */
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }

/** @public 4px vertical margin */
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }

/** @public 8px vertical margin */
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }

/** @public 12px vertical margin */
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }

/** @public 16px vertical margin */
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

/** @public 24px vertical margin */
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }

/** @public 32px vertical margin */
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }

/**
 * @section Individual Side Margin
 */

/** @public 8px top margin */
.mt-2 { margin-top: var(--spacing-2); }

/** @public 16px top margin */
.mt-4 { margin-top: var(--spacing-4); }

/** @public 24px top margin */
.mt-6 { margin-top: var(--spacing-6); }

/** @public 32px top margin */
.mt-8 { margin-top: var(--spacing-8); }

/** @public 48px top margin */
.mt-12 { margin-top: var(--spacing-12); }

/** @public 8px bottom margin */
.mb-2 { margin-bottom: var(--spacing-2); }

/** @public 16px bottom margin */
.mb-4 { margin-bottom: var(--spacing-4); }

/** @public 24px bottom margin */
.mb-6 { margin-bottom: var(--spacing-6); }

/** @public 32px bottom margin */
.mb-8 { margin-bottom: var(--spacing-8); }

/** @public 48px bottom margin */
.mb-12 { margin-bottom: var(--spacing-12); }

/** @public 4px left margin */
.ml-1 { margin-left: var(--spacing-1); }

/** @public 8px left margin */
.ml-2 { margin-left: var(--spacing-2); }

/** @public 12px left margin */
.ml-3 { margin-left: var(--spacing-3); }

/** @public 16px left margin */
.ml-4 { margin-left: var(--spacing-4); }

/** @public 4px right margin */
.mr-1 { margin-right: var(--spacing-1); }

/** @public 8px right margin */
.mr-2 { margin-right: var(--spacing-2); }

/** @public 12px right margin */
.mr-3 { margin-right: var(--spacing-3); }

/** @public 16px right margin */
.mr-4 { margin-right: var(--spacing-4); }

/** @public -12px left margin (negative spacing) */
.-ml-3 { margin-left: calc(var(--spacing-3) * -1); }