/**
 * Spacing utility library.
 * Scale: 10px, 20px, 30px, 40px, 50px, 80px
 *
 * Classes:
 *   .p-{n}   padding all sides
 *   .pt-{n}  padding-top      .pb-{n}  padding-bottom
 *   .pl-{n}  padding-left     .pr-{n}  padding-right
 *   .px-{n}  padding left+right   .py-{n}  padding top+bottom
 *   .m-{n}, .mt-{n}, .mb-{n}, .ml-{n}, .mr-{n}, .mx-{n}, .my-{n}  (same pattern for margin)
 *   .gap-{n} flex/grid gap
 *
 * Negative margins: .-mt-{n}, .-mb-{n}, .-ml-{n}, .-mr-{n}, .-mx-{n}, .-my-{n}
 */

:root {
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
}

/* ---------- Padding ---------- */
.p-10 { padding: var(--space-10); }
.p-20 { padding: var(--space-20); }
.p-30 { padding: var(--space-30); }
.p-40 { padding: var(--space-40); }
.p-50 { padding: var(--space-50); }
.p-60 { padding: var(--space-60); }
.p-80 { padding: var(--space-80); }

.pt-10 { padding-top: var(--space-10); }
.pt-20 { padding-top: var(--space-20); }
.pt-30 { padding-top: var(--space-30); }
.pt-40 { padding-top: var(--space-40); }
.pt-50 { padding-top: var(--space-50); }
.pt-60 { padding-top: var(--space-60); }
.pt-80 { padding-top: var(--space-80); }

.pb-10 { padding-bottom: var(--space-10); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-30 { padding-bottom: var(--space-30); }
.pb-40 { padding-bottom: var(--space-40); }
.pb-50 { padding-bottom: var(--space-50); }
.pb-60 { padding-bottom: var(--space-60); }
.pb-80 { padding-bottom: var(--space-80); }

.pl-10 { padding-left: var(--space-10); }
.pl-20 { padding-left: var(--space-20); }
.pl-30 { padding-left: var(--space-30); }
.pl-40 { padding-left: var(--space-40); }
.pl-50 { padding-left: var(--space-50); }
.pl-60 { padding-left: var(--space-60); }
.pl-80 { padding-left: var(--space-80); }

.pr-10 { padding-right: var(--space-10); }
.pr-20 { padding-right: var(--space-20); }
.pr-30 { padding-right: var(--space-30); }
.pr-40 { padding-right: var(--space-40); }
.pr-50 { padding-right: var(--space-50); }
.pr-60 { padding-right: var(--space-60); }
.pr-80 { padding-right: var(--space-80); }

.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-30 { padding-left: var(--space-30); padding-right: var(--space-30); }
.px-40 { padding-left: var(--space-40); padding-right: var(--space-40); }
.px-50 { padding-left: var(--space-50); padding-right: var(--space-50); }
.px-60 { padding-left: var(--space-60); padding-right: var(--space-60); }
.px-80 { padding-left: var(--space-80); padding-right: var(--space-80); }

.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-30 { padding-top: var(--space-30); padding-bottom: var(--space-30); }
.py-40 { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.py-50 { padding-top: var(--space-50); padding-bottom: var(--space-50); }
.py-60 { padding-top: var(--space-60); padding-bottom: var(--space-60); }
.py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); }

/* ---------- Margin ---------- */
.m-10 { margin: var(--space-10); }
.m-20 { margin: var(--space-20); }
.m-30 { margin: var(--space-30); }
.m-40 { margin: var(--space-40); }
.m-50 { margin: var(--space-50); }
.m-60 { margin: var(--space-60); }
.m-80 { margin: var(--space-80); }

.mt-10 { margin-top: var(--space-10); }
.mt-20 { margin-top: var(--space-20); }
.mt-30 { margin-top: var(--space-30); }
.mt-40 { margin-top: var(--space-40); }
.mt-50 { margin-top: var(--space-50); }
.mt-60 { margin-top: var(--space-60); }
.mt-80 { margin-top: var(--space-80); }

.mb-10 { margin-bottom: var(--space-10); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-30 { margin-bottom: var(--space-30); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-50 { margin-bottom: var(--space-50); }
.mb-60 { margin-bottom: var(--space-60); }
.mb-80 { margin-bottom: var(--space-80); }

.ml-10 { margin-left: var(--space-10); }
.ml-20 { margin-left: var(--space-20); }
.ml-30 { margin-left: var(--space-30); }
.ml-40 { margin-left: var(--space-40); }
.ml-50 { margin-left: var(--space-50); }
.ml-60 { margin-left: var(--space-60); }
.ml-80 { margin-left: var(--space-80); }

.mr-10 { margin-right: var(--space-10); }
.mr-20 { margin-right: var(--space-20); }
.mr-30 { margin-right: var(--space-30); }
.mr-40 { margin-right: var(--space-40); }
.mr-50 { margin-right: var(--space-50); }
.mr-60 { margin-right: var(--space-60); }
.mr-80 { margin-right: var(--space-80); }

.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); }
.mx-30 { margin-left: var(--space-30); margin-right: var(--space-30); }
.mx-40 { margin-left: var(--space-40); margin-right: var(--space-40); }
.mx-50 { margin-left: var(--space-50); margin-right: var(--space-50); }
.mx-60 { margin-left: var(--space-60); margin-right: var(--space-60); }
.mx-80 { margin-left: var(--space-80); margin-right: var(--space-80); }

.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
.my-30 { margin-top: var(--space-30); margin-bottom: var(--space-30); }
.my-40 { margin-top: var(--space-40); margin-bottom: var(--space-40); }
.my-50 { margin-top: var(--space-50); margin-bottom: var(--space-50); }
.my-60 { margin-top: var(--space-60); margin-bottom: var(--space-60); }
.my-80 { margin-top: var(--space-80); margin-bottom: var(--space-80); }

/* ---------- Negative margin (for overlap layouts) ---------- */
.-mt-10 { margin-top: calc(var(--space-10) * -1); }
.-mt-20 { margin-top: calc(var(--space-20) * -1); }
.-mt-30 { margin-top: calc(var(--space-30) * -1); }
.-mt-40 { margin-top: calc(var(--space-40) * -1); }
.-mt-50 { margin-top: calc(var(--space-50) * -1); }
.-mt-60 { margin-top: calc(var(--space-60) * -1); }
.-mt-80 { margin-top: calc(var(--space-80) * -1); }

.-mb-10 { margin-bottom: calc(var(--space-10) * -1); }
.-mb-20 { margin-bottom: calc(var(--space-20) * -1); }
.-mb-30 { margin-bottom: calc(var(--space-30) * -1); }
.-mb-40 { margin-bottom: calc(var(--space-40) * -1); }
.-mb-50 { margin-bottom: calc(var(--space-50) * -1); }
.-mb-60 { margin-bottom: calc(var(--space-60) * -1); }
.-mb-80 { margin-bottom: calc(var(--space-80) * -1); }

.-ml-10 { margin-left: calc(var(--space-10) * -1); }
.-ml-20 { margin-left: calc(var(--space-20) * -1); }
.-ml-30 { margin-left: calc(var(--space-30) * -1); }
.-ml-40 { margin-left: calc(var(--space-40) * -1); }
.-ml-50 { margin-left: calc(var(--space-50) * -1); }
.-ml-60 { margin-left: calc(var(--space-60) * -1); }
.-ml-80 { margin-left: calc(var(--space-80) * -1); }

.-mr-10 { margin-right: calc(var(--space-10) * -1); }
.-mr-20 { margin-right: calc(var(--space-20) * -1); }
.-mr-30 { margin-right: calc(var(--space-30) * -1); }
.-mr-40 { margin-right: calc(var(--space-40) * -1); }
.-mr-50 { margin-right: calc(var(--space-50) * -1); }
.-mr-60 { margin-right: calc(var(--space-60) * -1); }
.-mr-80 { margin-right: calc(var(--space-80) * -1); }

.-mx-10 { margin-left: calc(var(--space-10) * -1); margin-right: calc(var(--space-10) * -1); }
.-mx-20 { margin-left: calc(var(--space-20) * -1); margin-right: calc(var(--space-20) * -1); }
.-mx-30 { margin-left: calc(var(--space-30) * -1); margin-right: calc(var(--space-30) * -1); }
.-mx-40 { margin-left: calc(var(--space-40) * -1); margin-right: calc(var(--space-40) * -1); }
.-mx-50 { margin-left: calc(var(--space-50) * -1); margin-right: calc(var(--space-50) * -1); }
.-mx-60 { margin-left: calc(var(--space-60) * -1); margin-right: calc(var(--space-60) * -1); }
.-mx-80 { margin-left: calc(var(--space-80) * -1); margin-right: calc(var(--space-80) * -1); }

.-my-10 { margin-top: calc(var(--space-10) * -1); margin-bottom: calc(var(--space-10) * -1); }
.-my-20 { margin-top: calc(var(--space-20) * -1); margin-bottom: calc(var(--space-20) * -1); }
.-my-30 { margin-top: calc(var(--space-30) * -1); margin-bottom: calc(var(--space-30) * -1); }
.-my-40 { margin-top: calc(var(--space-40) * -1); margin-bottom: calc(var(--space-40) * -1); }
.-my-50 { margin-top: calc(var(--space-50) * -1); margin-bottom: calc(var(--space-50) * -1); }
.-my-60 { margin-top: calc(var(--space-60) * -1); margin-bottom: calc(var(--space-60) * -1); }
.-my-80 { margin-top: calc(var(--space-80) * -1); margin-bottom: calc(var(--space-80) * -1); }

/* ---------- Gap (flex/grid) ---------- */
.gap-10 { gap: var(--space-10); }
.gap-20 { gap: var(--space-20); }
.gap-30 { gap: var(--space-30); }
.gap-40 { gap: var(--space-40); }
.gap-50 { gap: var(--space-50); }
.gap-60 { gap: var(--space-60); }
.gap-80 { gap: var(--space-80); }

.gap-x-10 { column-gap: var(--space-10); }
.gap-x-20 { column-gap: var(--space-20); }
.gap-x-30 { column-gap: var(--space-30); }
.gap-x-40 { column-gap: var(--space-40); }
.gap-x-50 { column-gap: var(--space-50); }
.gap-x-60 { column-gap: var(--space-60); }
.gap-x-80 { column-gap: var(--space-80); }

.gap-y-10 { row-gap: var(--space-10); }
.gap-y-20 { row-gap: var(--space-20); }
.gap-y-30 { row-gap: var(--space-30); }
.gap-y-40 { row-gap: var(--space-40); }
.gap-y-50 { row-gap: var(--space-50); }
.gap-y-60 { row-gap: var(--space-60); }
.gap-y-80 { row-gap: var(--space-80); }

/* ---------- Responsive: halve larger spacing on mobile ---------- */
@media (max-width: 768px) {
  .p-40 { padding: 20px; }
  .py-40 { padding-top: 20px; padding-bottom: 20px; }
  .px-40 { padding-left: 20px; padding-right: 20px; }
  .m-40 { margin: 20px; }
  .my-40 { margin-top: 20px; margin-bottom: 20px; }
  .mx-40 { margin-left: 20px; margin-right: 20px; }
  .p-50 { padding: 25px; }
  .py-50 { padding-top: 25px; padding-bottom: 25px; }
  .px-50 { padding-left: 25px; padding-right: 25px; }
  .m-50 { margin: 25px; }
  .my-50 { margin-top: 25px; margin-bottom: 25px; }
  .mx-50 { margin-left: 25px; margin-right: 25px; }
  .p-60 { padding: 32px; }
  .py-60 { padding-top: 32px; padding-bottom: 32px; }
  .px-60 { padding-left: 32px; padding-right: 32px; }
  .m-60 { margin: 32px; }
  .my-60 { margin-top: 32px; margin-bottom: 32px; }
  .mx-60 { margin-left: 32px; margin-right: 32px; }
  .p-80 { padding: 40px; }
  .py-80 { padding-top: 40px; padding-bottom: 40px; }
  .px-80 { padding-left: 40px; padding-right: 40px; }
  .m-80 { margin: 40px; }
  .my-80 { margin-top: 40px; margin-bottom: 40px; }
  .mx-80 { margin-left: 40px; margin-right: 40px; }
}