:root {
    --space-0: 0rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-7: 5rem;
    --space-8: 6rem;
    --space-9: 7rem;
    --space-10: 8rem;
    --space-11: 9rem;
    --space-12: 10rem;
  }
  
  /* Margin Bottom */
  .mb-0  { margin-bottom: var(--space-0) !important; }
  .mb-1  { margin-bottom: var(--space-1) !important; }
  .mb-2  { margin-bottom: var(--space-2) !important; }
  .mb-3  { margin-bottom: var(--space-3) !important; }
  .mb-4  { margin-bottom: var(--space-4) !important; }
  .mb-5  { margin-bottom: var(--space-5) !important; }
  .mb-6  { margin-bottom: var(--space-6) !important; }
  .mb-7  { margin-bottom: var(--space-7) !important; }
  .mb-8  { margin-bottom: var(--space-8) !important; }
  .mb-9  { margin-bottom: var(--space-9) !important; }
  .mb-10 { margin-bottom: var(--space-10) !important; }
  .mb-11 { margin-bottom: var(--space-11) !important; }
  .mb-12 { margin-bottom: var(--space-12) !important; }
  
  /* Margin Top */
  .mt-0  { margin-top: var(--space-0) !important; }
  .mt-1  { margin-top: var(--space-1) !important; }
  /* ... repeat until 12 */
  .mt-2  { margin-top: var(--space-2) !important; }
  .mt-3  { margin-top: var(--space-3) !important; }
  .mt-4  { margin-top: var(--space-4) !important; }
  .mt-5  { margin-top: var(--space-5) !important; }
  .mt-6  { margin-top: var(--space-6) !important; }
  .mt-7  { margin-top: var(--space-7) !important; }
  .mt-8  { margin-top: var(--space-8) !important; }
  .mt-9  { margin-top: var(--space-9) !important; }
  .mt-10 { margin-top: var(--space-10) !important; }
  .mt-11 { margin-top: var(--space-11) !important; }
  .mt-12 { margin-top: var(--space-12) !important; }
  
  /* Margin X (left + right) */
  .mx-0  { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
  .mx-1  { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .mx-2  { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .mx-3  { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .mx-4  { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .mx-5  { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .mx-6  { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .mx-7  { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
  .mx-8  { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
  .mx-9  { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
  .mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
  .mx-11 { margin-left: var(--space-11) !important; margin-right: var(--space-11) !important; }
  .mx-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
  
  /* Padding Top */
  .pt-0  { padding-top: var(--space-0) !important; }
  .pt-1  { padding-top: var(--space-1) !important; }
  .pt-2  { padding-top: var(--space-2) !important; }
  .pt-3  { padding-top: var(--space-3) !important; }
  .pt-4  { padding-top: var(--space-4) !important; }
  .pt-5  { padding-top: var(--space-5) !important; }
  .pt-6  { padding-top: var(--space-6) !important; }
  .pt-7  { padding-top: var(--space-7) !important; }
  .pt-8  { padding-top: var(--space-8) !important; }
  .pt-9  { padding-top: var(--space-9) !important; }
  .pt-10 { padding-top: var(--space-10) !important; }
  .pt-11 { padding-top: var(--space-11) !important; }
  .pt-12 { padding-top: var(--space-12) !important; }
  
  /* Padding Bottom */
  .pb-0  { padding-bottom: var(--space-0) !important; }
  .pb-1  { padding-bottom: var(--space-1) !important; }
  .pb-2  { padding-bottom: var(--space-2) !important; }
  .pb-3  { padding-bottom: var(--space-3) !important; }
  .pb-4  { padding-bottom: var(--space-4) !important; }
  .pb-5  { padding-bottom: var(--space-5) !important; }
  .pb-6  { padding-bottom: var(--space-6) !important; }
  .pb-7  { padding-bottom: var(--space-7) !important; }
  .pb-8  { padding-bottom: var(--space-8) !important; }
  .pb-9  { padding-bottom: var(--space-9) !important; }
  .pb-10 { padding-bottom: var(--space-10) !important; }
  .pb-11 { padding-bottom: var(--space-11) !important; }
  .pb-12 { padding-bottom: var(--space-12) !important; }