/**
 * COEUS DESIGN SYSTEM V2 - SPACING UTILITIES
 *
 * PURPOSE:
 * Standardized Tailwind-style spacing utilities
 * Number-based scale for consistent spacing rhythm
 *
 * SCALE (1 unit = 0.25rem = 4px):
 * 0  = 0       (no spacing)
 * 1  = 0.25rem (4px)
 * 2  = 0.5rem  (8px)
 * 3  = 0.75rem (12px)
 * 4  = 1rem    (16px)  ← Default spacing
 * 5  = 1.25rem (20px)
 * 6  = 1.5rem  (24px)
 * 8  = 2rem    (32px)
 * 10 = 2.5rem  (40px)
 * 12 = 3rem    (48px)
 * 16 = 4rem    (64px)
 * 20 = 5rem    (80px)
 * 24 = 6rem    (96px)
 *
 * MIGRATION FROM V1:
 * - p-xs  → p-1
 * - p-sm  → p-2
 * - p-md  → p-4
 * - p-lg  → p-6
 * - p-xl  → p-8
 * - p-2xl → p-12
 * - p-3xl → p-16
 *
 * DEPENDENCIES: variables-v2.css
 * VERSION: 2.0.0
 * CREATED: 2025-11-18
 */

/* ============================================ */
/*              PADDING - ALL SIDES             */
/* ============================================ */

.p-0  { padding: var(--spacing-0); }
.p-1  { padding: var(--spacing-1); }
.p-2  { padding: var(--spacing-2); }
.p-3  { padding: var(--spacing-3); }
.p-4  { padding: var(--spacing-4); }
.p-5  { padding: var(--spacing-5); }
.p-6  { padding: var(--spacing-6); }
.p-7  { padding: var(--spacing-7); }
.p-8  { padding: var(--spacing-8); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }
.p-24 { padding: var(--spacing-24); }

/* ============================================ */
/*           PADDING - HORIZONTAL (X-axis)      */
/* ============================================ */

.px-0  { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.px-1  { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2  { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3  { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4  { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5  { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6  { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-7  { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }
.px-8  { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.px-10 { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }
.px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
.px-20 { padding-left: var(--spacing-20); padding-right: var(--spacing-20); }
.px-24 { padding-left: var(--spacing-24); padding-right: var(--spacing-24); }

/* ============================================ */
/*            PADDING - VERTICAL (Y-axis)       */
/* ============================================ */

.py-0  { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.py-1  { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2  { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3  { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4  { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5  { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6  { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-7  { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }
.py-8  { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }
.py-24 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }

/* ============================================ */
/*          PADDING - INDIVIDUAL SIDES          */
/* ============================================ */

/* Padding Top */
.pt-0  { padding-top: var(--spacing-0); }
.pt-1  { padding-top: var(--spacing-1); }
.pt-2  { padding-top: var(--spacing-2); }
.pt-3  { padding-top: var(--spacing-3); }
.pt-4  { padding-top: var(--spacing-4); }
.pt-5  { padding-top: var(--spacing-5); }
.pt-6  { padding-top: var(--spacing-6); }
.pt-7  { padding-top: var(--spacing-7); }
.pt-8  { padding-top: var(--spacing-8); }
.pt-10 { padding-top: var(--spacing-10); }
.pt-12 { padding-top: var(--spacing-12); }
.pt-16 { padding-top: var(--spacing-16); }
.pt-20 { padding-top: var(--spacing-20); }
.pt-24 { padding-top: var(--spacing-24); }

/* Padding Right */
.pr-0  { padding-right: var(--spacing-0); }
.pr-1  { padding-right: var(--spacing-1); }
.pr-2  { padding-right: var(--spacing-2); }
.pr-3  { padding-right: var(--spacing-3); }
.pr-4  { padding-right: var(--spacing-4); }
.pr-5  { padding-right: var(--spacing-5); }
.pr-6  { padding-right: var(--spacing-6); }
.pr-7  { padding-right: var(--spacing-7); }
.pr-8  { padding-right: var(--spacing-8); }
.pr-10 { padding-right: var(--spacing-10); }
.pr-12 { padding-right: var(--spacing-12); }
.pr-16 { padding-right: var(--spacing-16); }
.pr-20 { padding-right: var(--spacing-20); }
.pr-24 { padding-right: var(--spacing-24); }

/* Padding Bottom */
.pb-0  { padding-bottom: var(--spacing-0); }
.pb-1  { padding-bottom: var(--spacing-1); }
.pb-2  { padding-bottom: var(--spacing-2); }
.pb-3  { padding-bottom: var(--spacing-3); }
.pb-4  { padding-bottom: var(--spacing-4); }
.pb-5  { padding-bottom: var(--spacing-5); }
.pb-6  { padding-bottom: var(--spacing-6); }
.pb-7  { padding-bottom: var(--spacing-7); }
.pb-8  { padding-bottom: var(--spacing-8); }
.pb-10 { padding-bottom: var(--spacing-10); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pb-16 { padding-bottom: var(--spacing-16); }
.pb-20 { padding-bottom: var(--spacing-20); }
.pb-24 { padding-bottom: var(--spacing-24); }

/* Padding Left */
.pl-0  { padding-left: var(--spacing-0); }
.pl-1  { padding-left: var(--spacing-1); }
.pl-2  { padding-left: var(--spacing-2); }
.pl-3  { padding-left: var(--spacing-3); }
.pl-4  { padding-left: var(--spacing-4); }
.pl-5  { padding-left: var(--spacing-5); }
.pl-6  { padding-left: var(--spacing-6); }
.pl-7  { padding-left: var(--spacing-7); }
.pl-8  { padding-left: var(--spacing-8); }
.pl-10 { padding-left: var(--spacing-10); }
.pl-12 { padding-left: var(--spacing-12); }
.pl-16 { padding-left: var(--spacing-16); }
.pl-20 { padding-left: var(--spacing-20); }
.pl-24 { padding-left: var(--spacing-24); }

/* ============================================ */
/*              MARGIN - ALL SIDES              */
/* ============================================ */

.m-0  { margin: var(--spacing-0); }
.m-1  { margin: var(--spacing-1); }
.m-2  { margin: var(--spacing-2); }
.m-3  { margin: var(--spacing-3); }
.m-4  { margin: var(--spacing-4); }
.m-5  { margin: var(--spacing-5); }
.m-6  { margin: var(--spacing-6); }
.m-7  { margin: var(--spacing-7); }
.m-8  { margin: var(--spacing-8); }
.m-10 { margin: var(--spacing-10); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }

/* Auto margin for centering */
.m-auto { margin: auto; }

/* ============================================ */
/*           MARGIN - HORIZONTAL (X-axis)       */
/* ============================================ */

.mx-0  { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }
.mx-1  { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-2  { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-3  { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx-4  { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-5  { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.mx-6  { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.mx-7  { margin-left: var(--spacing-7); margin-right: var(--spacing-7); }
.mx-8  { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.mx-10 { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }
.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
.mx-20 { margin-left: var(--spacing-20); margin-right: var(--spacing-20); }
.mx-24 { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }

/* Auto horizontal margin for centering */
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================ */
/*            MARGIN - VERTICAL (Y-axis)        */
/* ============================================ */

.my-0  { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }
.my-1  { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-2  { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-3  { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-4  { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-5  { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.my-6  { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.my-7  { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }
.my-8  { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.my-20 { margin-top: var(--spacing-20); margin-bottom: var(--spacing-20); }
.my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }

/* ============================================ */
/*          MARGIN - INDIVIDUAL SIDES           */
/* ============================================ */

/* Margin Top */
.mt-0  { margin-top: var(--spacing-0); }
.mt-1  { margin-top: var(--spacing-1); }
.mt-2  { margin-top: var(--spacing-2); }
.mt-3  { margin-top: var(--spacing-3); }
.mt-4  { margin-top: var(--spacing-4); }
.mt-5  { margin-top: var(--spacing-5); }
.mt-6  { margin-top: var(--spacing-6); }
.mt-7  { margin-top: var(--spacing-7); }
.mt-8  { margin-top: var(--spacing-8); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-24 { margin-top: var(--spacing-24); }

/* Margin Right */
.mr-0  { margin-right: var(--spacing-0); }
.mr-1  { margin-right: var(--spacing-1); }
.mr-2  { margin-right: var(--spacing-2); }
.mr-3  { margin-right: var(--spacing-3); }
.mr-4  { margin-right: var(--spacing-4); }
.mr-5  { margin-right: var(--spacing-5); }
.mr-6  { margin-right: var(--spacing-6); }
.mr-7  { margin-right: var(--spacing-7); }
.mr-8  { margin-right: var(--spacing-8); }
.mr-10 { margin-right: var(--spacing-10); }
.mr-12 { margin-right: var(--spacing-12); }
.mr-16 { margin-right: var(--spacing-16); }
.mr-20 { margin-right: var(--spacing-20); }
.mr-24 { margin-right: var(--spacing-24); }

/* Margin Bottom */
.mb-0  { margin-bottom: var(--spacing-0); }
.mb-1  { margin-bottom: var(--spacing-1); }
.mb-2  { margin-bottom: var(--spacing-2); }
.mb-3  { margin-bottom: var(--spacing-3); }
.mb-4  { margin-bottom: var(--spacing-4); }
.mb-5  { margin-bottom: var(--spacing-5); }
.mb-6  { margin-bottom: var(--spacing-6); }
.mb-7  { margin-bottom: var(--spacing-7); }
.mb-8  { margin-bottom: var(--spacing-8); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-24 { margin-bottom: var(--spacing-24); }

/* Margin Left */
.ml-0  { margin-left: var(--spacing-0); }
.ml-1  { margin-left: var(--spacing-1); }
.ml-2  { margin-left: var(--spacing-2); }
.ml-3  { margin-left: var(--spacing-3); }
.ml-4  { margin-left: var(--spacing-4); }
.ml-5  { margin-left: var(--spacing-5); }
.ml-6  { margin-left: var(--spacing-6); }
.ml-7  { margin-left: var(--spacing-7); }
.ml-8  { margin-left: var(--spacing-8); }
.ml-10 { margin-left: var(--spacing-10); }
.ml-12 { margin-left: var(--spacing-12); }
.ml-16 { margin-left: var(--spacing-16); }
.ml-20 { margin-left: var(--spacing-20); }
.ml-24 { margin-left: var(--spacing-24); }

/* ============================================ */
/*                    GAP                       */
/*   Flexbox and Grid gap spacing              */
/* ============================================ */

.gap-0  { gap: var(--spacing-0); }
.gap-1  { gap: var(--spacing-1); }
.gap-2  { gap: var(--spacing-2); }
.gap-3  { gap: var(--spacing-3); }
.gap-4  { gap: var(--spacing-4); }
.gap-5  { gap: var(--spacing-5); }
.gap-6  { gap: var(--spacing-6); }
.gap-7  { gap: var(--spacing-7); }
.gap-8  { gap: var(--spacing-8); }
.gap-10 { gap: var(--spacing-10); }
.gap-12 { gap: var(--spacing-12); }
.gap-16 { gap: var(--spacing-16); }
.gap-20 { gap: var(--spacing-20); }
.gap-24 { gap: var(--spacing-24); }

/* Gap X (column-gap) */
.gap-x-0  { column-gap: var(--spacing-0); }
.gap-x-1  { column-gap: var(--spacing-1); }
.gap-x-2  { column-gap: var(--spacing-2); }
.gap-x-3  { column-gap: var(--spacing-3); }
.gap-x-4  { column-gap: var(--spacing-4); }
.gap-x-5  { column-gap: var(--spacing-5); }
.gap-x-6  { column-gap: var(--spacing-6); }
.gap-x-7  { column-gap: var(--spacing-7); }
.gap-x-8  { column-gap: var(--spacing-8); }
.gap-x-10 { column-gap: var(--spacing-10); }
.gap-x-12 { column-gap: var(--spacing-12); }
.gap-x-16 { column-gap: var(--spacing-16); }
.gap-x-20 { column-gap: var(--spacing-20); }
.gap-x-24 { column-gap: var(--spacing-24); }

/* Gap Y (row-gap) */
.gap-y-0  { row-gap: var(--spacing-0); }
.gap-y-1  { row-gap: var(--spacing-1); }
.gap-y-2  { row-gap: var(--spacing-2); }
.gap-y-3  { row-gap: var(--spacing-3); }
.gap-y-4  { row-gap: var(--spacing-4); }
.gap-y-5  { row-gap: var(--spacing-5); }
.gap-y-6  { row-gap: var(--spacing-6); }
.gap-y-7  { row-gap: var(--spacing-7); }
.gap-y-8  { row-gap: var(--spacing-8); }
.gap-y-10 { row-gap: var(--spacing-10); }
.gap-y-12 { row-gap: var(--spacing-12); }
.gap-y-16 { row-gap: var(--spacing-16); }
.gap-y-20 { row-gap: var(--spacing-20); }
.gap-y-24 { row-gap: var(--spacing-24); }

/* ============================================ */
/*                SPACE BETWEEN                 */
/*   Add spacing between flex/grid children    */
/* ============================================ */

.space-x-0 > * + * { margin-left: var(--spacing-0); }
.space-x-1 > * + * { margin-left: var(--spacing-1); }
.space-x-2 > * + * { margin-left: var(--spacing-2); }
.space-x-3 > * + * { margin-left: var(--spacing-3); }
.space-x-4 > * + * { margin-left: var(--spacing-4); }
.space-x-5 > * + * { margin-left: var(--spacing-5); }
.space-x-6 > * + * { margin-left: var(--spacing-6); }
.space-x-8 > * + * { margin-left: var(--spacing-8); }

.space-y-0 > * + * { margin-top: var(--spacing-0); }
.space-y-1 > * + * { margin-top: var(--spacing-1); }
.space-y-2 > * + * { margin-top: var(--spacing-2); }
.space-y-3 > * + * { margin-top: var(--spacing-3); }
.space-y-4 > * + * { margin-top: var(--spacing-4); }
.space-y-5 > * + * { margin-top: var(--spacing-5); }
.space-y-6 > * + * { margin-top: var(--spacing-6); }
.space-y-8 > * + * { margin-top: var(--spacing-8); }