Spacing Utilities

// All sides padding
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 2rem; }
.p-6 { padding: 3rem; }
.p-7 { padding: 4rem; }
.p-8 { padding: 5rem; }

// Top padding
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 2rem; }
.pt-6 { padding-top: 3rem; }
.pt-7 { padding-top: 4rem; }
.pt-8 { padding-top: 5rem; }

// Right padding
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 2rem; }
.pr-6 { padding-right: 3rem; }
.pr-7 { padding-right: 4rem; }
.pr-8 { padding-right: 5rem; }

// Bottom padding
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2rem; }
.pb-6 { padding-bottom: 3rem; }
.pb-7 { padding-bottom: 4rem; }
.pb-8 { padding-bottom: 5rem; }

// Left padding
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 2rem; }
.pl-6 { padding-left: 3rem; }
.pl-7 { padding-left: 4rem; }
.pl-8 { padding-left: 5rem; }

// Horizontal padding (left + right)
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 2rem; padding-right: 2rem; }
.px-6 { padding-left: 3rem; padding-right: 3rem; }
.px-7 { padding-left: 4rem; padding-right: 4rem; }
.px-8 { padding-left: 5rem; padding-right: 5rem; }

// Vertical padding (top + bottom)
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 2rem; padding-bottom: 2rem; }
.py-6 { padding-top: 3rem; padding-bottom: 3rem; }
.py-7 { padding-top: 4rem; padding-bottom: 4rem; }
.py-8 { padding-top: 5rem; padding-bottom: 5rem; }

// All sides margin
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 2rem; }
.m-6 { margin: 3rem; }
.m-7 { margin: 4rem; }
.m-8 { margin: 5rem; }

// Top margin
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mt-7 { margin-top: 4rem; }
.mt-8 { margin-top: 5rem; }

// Right margin
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 2rem; }
.mr-6 { margin-right: 3rem; }
.mr-7 { margin-right: 4rem; }
.mr-8 { margin-right: 5rem; }

// Bottom margin
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mb-7 { margin-bottom: 4rem; }
.mb-8 { margin-bottom: 5rem; }

// Left margin
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 2rem; }
.ml-6 { margin-left: 3rem; }
.ml-7 { margin-left: 4rem; }
.ml-8 { margin-left: 5rem; }

// Horizontal margin (left + right)
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 2rem; margin-right: 2rem; }
.mx-6 { margin-left: 3rem; margin-right: 3rem; }
.mx-7 { margin-left: 4rem; margin-right: 4rem; }
.mx-8 { margin-left: 5rem; margin-right: 5rem; }

// Vertical margin (top + bottom)
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 2rem; margin-bottom: 2rem; }
.my-6 { margin-top: 3rem; margin-bottom: 3rem; }
.my-7 { margin-top: 4rem; margin-bottom: 4rem; }
.my-8 { margin-top: 5rem; margin-bottom: 5rem; }

.m-auto { margin: auto; }
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

// Negative all sides margin
.-m-1 { margin: -0.25rem; }
.-m-2 { margin: -0.5rem; }
.-m-3 { margin: -1rem; }
.-m-4 { margin: -1.5rem; }
.-m-5 { margin: -2rem; }
.-m-6 { margin: -3rem; }
.-m-7 { margin: -4rem; }
.-m-8 { margin: -5rem; }

// Negative top margin
.-mt-1 { margin-top: -0.25rem; }
.-mt-2 { margin-top: -0.5rem; }
.-mt-3 { margin-top: -1rem; }
.-mt-4 { margin-top: -1.5rem; }
.-mt-5 { margin-top: -2rem; }
.-mt-6 { margin-top: -3rem; }
.-mt-7 { margin-top: -4rem; }
.-mt-8 { margin-top: -5rem; }

// Negative right margin
.-mr-1 { margin-right: -0.25rem; }
.-mr-2 { margin-right: -0.5rem; }
.-mr-3 { margin-right: -1rem; }
.-mr-4 { margin-right: -1.5rem; }
.-mr-5 { margin-right: -2rem; }
.-mr-6 { margin-right: -3rem; }
.-mr-7 { margin-right: -4rem; }
.-mr-8 { margin-right: -5rem; }

// Negative bottom margin
.-mb-1 { margin-bottom: -0.25rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-mb-3 { margin-bottom: -1rem; }
.-mb-4 { margin-bottom: -1.5rem; }
.-mb-5 { margin-bottom: -2rem; }
.-mb-6 { margin-bottom: -3rem; }
.-mb-7 { margin-bottom: -4rem; }
.-mb-8 { margin-bottom: -5rem; }

// Negative left margin
.-ml-1 { margin-left: -0.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.-ml-3 { margin-left: -1rem; }
.-ml-4 { margin-left: -1.5rem; }
.-ml-5 { margin-left: -2rem; }
.-ml-6 { margin-left: -3rem; }
.-ml-7 { margin-left: -4rem; }
.-ml-8 { margin-left: -5rem; }

// Negative horizontal margin
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.-mx-3 { margin-left: -1rem; margin-right: -1rem; }
.-mx-4 { margin-left: -1.5rem; margin-right: -1.5rem; }
.-mx-5 { margin-left: -2rem; margin-right: -2rem; }
.-mx-6 { margin-left: -3rem; margin-right: -3rem; }
.-mx-7 { margin-left: -4rem; margin-right: -4rem; }
.-mx-8 { margin-left: -5rem; margin-right: -5rem; }

// Negative vertical margin
.-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.-my-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
.-my-3 { margin-top: -1rem; margin-bottom: -1rem; }
.-my-4 { margin-top: -1.5rem; margin-bottom: -1.5rem; }
.-my-5 { margin-top: -2rem; margin-bottom: -2rem; }
.-my-6 { margin-top: -3rem; margin-bottom: -3rem; }
.-my-7 { margin-top: -4rem; margin-bottom: -4rem; }
.-my-8 { margin-top: -5rem; margin-bottom: -5rem; }

// Small screens (≥576px)
.sm\\:p-3 { /* padding: 1rem at sm+ */ }
.sm\\:m-4 { /* margin: 1.5rem at sm+ */ }
.sm\\:mx-auto { /* margin-left: auto; margin-right: auto at sm+ */ }
// ... all spacing classes with sm: prefix

// Medium screens (≥768px)
.md\\:p-6 { /* padding: 3rem at md+ */ }
.md\\:mb-0 { /* margin-bottom: 0 at md+ */ }
// ... all spacing classes with md: prefix

// Large screens (≥992px)
.lg\\:px-8 { /* padding-left: 5rem; padding-right: 5rem at lg+ */ }
.lg\\:my-6 { /* margin-top: 3rem; margin-bottom: 3rem at lg+ */ }
// ... all spacing classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:p-8 { /* padding: 5rem at xl+ */ }
.xl\\:-mt-4 { /* margin-top: -1.5rem at xl+ */ }
// ... all spacing classes with xl: prefix

<div class="p-4 surface-card border-round shadow-2">
  <h3 class="m-0 mb-3 text-primary">Card Title</h3>
  <p class="m-0 mb-4 text-color-secondary line-height-3">
    Card content with consistent spacing between elements.
  </p>
  <div class="flex gap-2">
    <button class="px-3 py-2 bg-primary text-white border-none border-round">
      Primary
    </button>
    <button class="px-3 py-2 border-1 border-primary text-primary bg-transparent border-round">
      Secondary
    </button>
  </div>
</div>

<form class="p-4 surface-section border-round">
  <div class="mb-4">
    <label class="block mb-2 font-semibold">Name</label>
    <input type="text" class="w-full p-3 border-1 border-surface-300 border-round">
  </div>
  <div class="mb-4">
    <label class="block mb-2 font-semibold">Email</label>
    <input type="email" class="w-full p-3 border-1 border-surface-300 border-round">
  </div>
  <div class="mb-6">
    <label class="block mb-2 font-semibold">Message</label>
    <textarea rows="4" class="w-full p-3 border-1 border-surface-300 border-round"></textarea>
  </div>
  <button type="submit" class="px-4 py-3 bg-primary text-white border-none border-round">
    Submit
  </button>
</form>

<nav class="flex align-items-center p-3 bg-primary">
  <div class="flex align-items-center gap-2">
    <img src="logo.png" alt="Logo" class="w-2rem h-2rem">
    <span class="text-white font-bold">Brand</span>
  </div>
  <!-- Auto margin pushes content to the right -->
  <div class="ml-auto flex gap-3">
    <a href="#" class="text-white no-underline px-2 py-1">Home</a>
    <a href="#" class="text-white no-underline px-2 py-1">About</a>
    <a href="#" class="text-white no-underline px-2 py-1">Contact</a>
  </div>
</nav>

<div class="p-3 md:p-6 lg:p-8 surface-card border-round">
  <h2 class="m-0 mb-2 md:mb-4 text-2xl md:text-3xl font-bold">
    Responsive Title
  </h2>
  <p class="m-0 mb-4 md:mb-6 text-color-secondary">
    Content with responsive spacing that adapts to screen size.
  </p>
  <div class="flex flex-column md:flex-row gap-3 md:gap-4">
    <button class="px-4 py-2 md:px-6 md:py-3 bg-primary text-white border-none border-round">
      Button 1
    </button>
    <button class="px-4 py-2 md:px-6 md:py-3 border-1 border-primary text-primary bg-transparent border-round">
      Button 2
    </button>
  </div>
</div>

<div class="relative">
  <div class="h-8rem bg-primary"></div>
  <div class="p-4 -mt-4 mx-3 bg-white border-round shadow-2">
    <h3 class="m-0 mb-2">Overlapping Card</h3>
    <p class="m-0">This card overlaps the element above using negative margin.</p>
  </div>
</div>

<div class="text-center py-8">
  <div class="inline-block mx-auto max-w-30rem">
    <h1 class="m-0 mb-4 text-4xl font-bold">Welcome</h1>
    <p class="m-0 mb-6 text-lg text-color-secondary">
      Centered content block with auto margins and consistent vertical spacing.
    </p>
    <button class="px-6 py-3 bg-primary text-white border-none border-round">
      Get Started
    </button>
  </div>
</div>