/**
 * WaitN Design System - Spacing Utilities
 * Margin and padding classes based on 8px scale
 */

/* ========================================
   PADDING - ALL SIDES
   ======================================== */
.p-0 { padding: var(--wn-space-0); }
.p-1 { padding: var(--wn-space-1); }
.p-2 { padding: var(--wn-space-2); }
.p-3 { padding: var(--wn-space-3); }
.p-4 { padding: var(--wn-space-4); }
.p-5 { padding: var(--wn-space-5); }
.p-6 { padding: var(--wn-space-6); }
.p-7 { padding: var(--wn-space-7); }
.p-8 { padding: var(--wn-space-8); }

/* ========================================
   PADDING - HORIZONTAL (X)
   ======================================== */
.px-0 { padding-left: var(--wn-space-0); padding-right: var(--wn-space-0); }
.px-1 { padding-left: var(--wn-space-1); padding-right: var(--wn-space-1); }
.px-2 { padding-left: var(--wn-space-2); padding-right: var(--wn-space-2); }
.px-3 { padding-left: var(--wn-space-3); padding-right: var(--wn-space-3); }
.px-4 { padding-left: var(--wn-space-4); padding-right: var(--wn-space-4); }
.px-5 { padding-left: var(--wn-space-5); padding-right: var(--wn-space-5); }
.px-6 { padding-left: var(--wn-space-6); padding-right: var(--wn-space-6); }

/* ========================================
   PADDING - VERTICAL (Y)
   ======================================== */
.py-0 { padding-top: var(--wn-space-0); padding-bottom: var(--wn-space-0); }
.py-1 { padding-top: var(--wn-space-1); padding-bottom: var(--wn-space-1); }
.py-2 { padding-top: var(--wn-space-2); padding-bottom: var(--wn-space-2); }
.py-3 { padding-top: var(--wn-space-3); padding-bottom: var(--wn-space-3); }
.py-4 { padding-top: var(--wn-space-4); padding-bottom: var(--wn-space-4); }
.py-5 { padding-top: var(--wn-space-5); padding-bottom: var(--wn-space-5); }
.py-6 { padding-top: var(--wn-space-6); padding-bottom: var(--wn-space-6); }

/* ========================================
   PADDING - INDIVIDUAL SIDES
   ======================================== */
.pt-0 { padding-top: var(--wn-space-0); }
.pt-1 { padding-top: var(--wn-space-1); }
.pt-2 { padding-top: var(--wn-space-2); }
.pt-3 { padding-top: var(--wn-space-3); }
.pt-4 { padding-top: var(--wn-space-4); }
.pt-5 { padding-top: var(--wn-space-5); }
.pt-6 { padding-top: var(--wn-space-6); }

.pb-0 { padding-bottom: var(--wn-space-0); }
.pb-1 { padding-bottom: var(--wn-space-1); }
.pb-2 { padding-bottom: var(--wn-space-2); }
.pb-3 { padding-bottom: var(--wn-space-3); }
.pb-4 { padding-bottom: var(--wn-space-4); }
.pb-5 { padding-bottom: var(--wn-space-5); }
.pb-6 { padding-bottom: var(--wn-space-6); }

.pl-0 { padding-left: var(--wn-space-0); }
.pl-1 { padding-left: var(--wn-space-1); }
.pl-2 { padding-left: var(--wn-space-2); }
.pl-3 { padding-left: var(--wn-space-3); }
.pl-4 { padding-left: var(--wn-space-4); }
.pl-5 { padding-left: var(--wn-space-5); }
.pl-6 { padding-left: var(--wn-space-6); }

.pr-0 { padding-right: var(--wn-space-0); }
.pr-1 { padding-right: var(--wn-space-1); }
.pr-2 { padding-right: var(--wn-space-2); }
.pr-3 { padding-right: var(--wn-space-3); }
.pr-4 { padding-right: var(--wn-space-4); }
.pr-5 { padding-right: var(--wn-space-5); }
.pr-6 { padding-right: var(--wn-space-6); }

/* ========================================
   MARGIN - ALL SIDES
   ======================================== */
.m-0 { margin: var(--wn-space-0); }
.m-1 { margin: var(--wn-space-1); }
.m-2 { margin: var(--wn-space-2); }
.m-3 { margin: var(--wn-space-3); }
.m-4 { margin: var(--wn-space-4); }
.m-5 { margin: var(--wn-space-5); }
.m-6 { margin: var(--wn-space-6); }
.m-7 { margin: var(--wn-space-7); }
.m-8 { margin: var(--wn-space-8); }
.m-auto { margin: auto; }

/* ========================================
   MARGIN - HORIZONTAL (X)
   ======================================== */
.mx-0 { margin-left: var(--wn-space-0); margin-right: var(--wn-space-0); }
.mx-1 { margin-left: var(--wn-space-1); margin-right: var(--wn-space-1); }
.mx-2 { margin-left: var(--wn-space-2); margin-right: var(--wn-space-2); }
.mx-3 { margin-left: var(--wn-space-3); margin-right: var(--wn-space-3); }
.mx-4 { margin-left: var(--wn-space-4); margin-right: var(--wn-space-4); }
.mx-5 { margin-left: var(--wn-space-5); margin-right: var(--wn-space-5); }
.mx-6 { margin-left: var(--wn-space-6); margin-right: var(--wn-space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ========================================
   MARGIN - VERTICAL (Y)
   ======================================== */
.my-0 { margin-top: var(--wn-space-0); margin-bottom: var(--wn-space-0); }
.my-1 { margin-top: var(--wn-space-1); margin-bottom: var(--wn-space-1); }
.my-2 { margin-top: var(--wn-space-2); margin-bottom: var(--wn-space-2); }
.my-3 { margin-top: var(--wn-space-3); margin-bottom: var(--wn-space-3); }
.my-4 { margin-top: var(--wn-space-4); margin-bottom: var(--wn-space-4); }
.my-5 { margin-top: var(--wn-space-5); margin-bottom: var(--wn-space-5); }
.my-6 { margin-top: var(--wn-space-6); margin-bottom: var(--wn-space-6); }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* ========================================
   MARGIN - INDIVIDUAL SIDES
   ======================================== */
.mt-0 { margin-top: var(--wn-space-0); }
.mt-1 { margin-top: var(--wn-space-1); }
.mt-2 { margin-top: var(--wn-space-2); }
.mt-3 { margin-top: var(--wn-space-3); }
.mt-4 { margin-top: var(--wn-space-4); }
.mt-5 { margin-top: var(--wn-space-5); }
.mt-6 { margin-top: var(--wn-space-6); }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: var(--wn-space-0); }
.mb-1 { margin-bottom: var(--wn-space-1); }
.mb-2 { margin-bottom: var(--wn-space-2); }
.mb-3 { margin-bottom: var(--wn-space-3); }
.mb-4 { margin-bottom: var(--wn-space-4); }
.mb-5 { margin-bottom: var(--wn-space-5); }
.mb-6 { margin-bottom: var(--wn-space-6); }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: var(--wn-space-0); }
.ml-1 { margin-left: var(--wn-space-1); }
.ml-2 { margin-left: var(--wn-space-2); }
.ml-3 { margin-left: var(--wn-space-3); }
.ml-4 { margin-left: var(--wn-space-4); }
.ml-5 { margin-left: var(--wn-space-5); }
.ml-6 { margin-left: var(--wn-space-6); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: var(--wn-space-0); }
.mr-1 { margin-right: var(--wn-space-1); }
.mr-2 { margin-right: var(--wn-space-2); }
.mr-3 { margin-right: var(--wn-space-3); }
.mr-4 { margin-right: var(--wn-space-4); }
.mr-5 { margin-right: var(--wn-space-5); }
.mr-6 { margin-right: var(--wn-space-6); }
.mr-auto { margin-right: auto; }

/* ========================================
   GAP UTILITIES (for flex/grid)
   ======================================== */
.gap-0 { gap: var(--wn-space-0); }
.gap-1 { gap: var(--wn-space-1); }
.gap-2 { gap: var(--wn-space-2); }
.gap-3 { gap: var(--wn-space-3); }
.gap-4 { gap: var(--wn-space-4); }
.gap-5 { gap: var(--wn-space-5); }
.gap-6 { gap: var(--wn-space-6); }

/* ========================================
   WIDTH & HEIGHT
   ======================================== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }