/* ===== UTILITIES: SPACING (Padding & Margin) ===== */
/* Utility classes for spacing - NOT BEM (utilities are exempt) */
/* These utilities are single-purpose and can be combined in HTML */

/* === PADDING UTILITIES === */
.p-0   { padding: 0; }
.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem; }
.p-3   { padding: 0.75rem; }
.p-4   { padding: 1rem; }
.p-5   { padding: 1.5rem; }
.p-6   { padding: 2rem; }
.p-8   { padding: 2.5rem; }

/* Horizontal padding */
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-5  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-6  { padding-left: 2rem; padding-right: 2rem; }

/* Vertical padding */
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-5  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-6  { padding-top: 2rem; padding-bottom: 2rem; }

/* === MARGIN UTILITIES === */
.m-0   { margin: 0; }
.m-1   { margin: 0.25rem; }
.m-2   { margin: 0.5rem; }
.m-3   { margin: 0.75rem; }
.m-4   { margin: 1rem; }
.m-5   { margin: 1.5rem; }
.m-6   { margin: 2rem; }
.m-auto { margin: auto; }

/* Horizontal margin (left & right) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2  { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3  { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4  { margin-left: 1rem; margin-right: 1rem; }
.mx-5  { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-6  { margin-left: 2rem; margin-right: 2rem; }

/* Vertical margin (top & bottom) */
.my-0  { margin-top: 0; margin-bottom: 0; }
.my-2  { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3  { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4  { margin-top: 1rem; margin-bottom: 1rem; }
.my-5  { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-6  { margin-top: 2rem; margin-bottom: 2rem; }

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

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

/* Right margin */
.mr-2  { margin-right: 0.5rem; }
.mr-3  { margin-right: 0.75rem; }
.mr-4  { margin-right: 1rem; }

/* Left margin */
.ml-2  { margin-left: 0.5rem; }
.ml-3  { margin-left: 0.75rem; }
.ml-4  { margin-left: 1rem; }

/* === NEGATIVE MARGINS (used cautiously) === */
.-mt-2 { margin-top: -0.5rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-my-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }