/*
 * CyberPoint Texas Spacing System
 * Based on 0.25rem (4px) increments
 * Inspired by: Tailwind CSS & usepastel.com spacing patterns
 * Author: CyberPoint Texas Design System
 */

/* ============================================
   CSS CUSTOM PROPERTIES - SPACING SCALE
   ============================================ */

:root {
  /* Base Spacing Scale (0.25rem = 4px increments) */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;   /* 2px */
  --spacing-1: 0.25rem;      /* 4px */
  --spacing-1-5: 0.375rem;   /* 6px */
  --spacing-2: 0.5rem;       /* 8px */
  --spacing-2-5: 0.625rem;   /* 10px */
  --spacing-3: 0.75rem;      /* 12px */
  --spacing-3-5: 0.875rem;   /* 14px */
  --spacing-4: 1rem;         /* 16px */
  --spacing-5: 1.25rem;      /* 20px */
  --spacing-6: 1.5rem;       /* 24px */
  --spacing-7: 1.75rem;      /* 28px */
  --spacing-8: 2rem;         /* 32px */
  --spacing-9: 2.25rem;      /* 36px */
  --spacing-10: 2.5rem;      /* 40px */
  --spacing-11: 2.75rem;     /* 44px */
  --spacing-12: 3rem;        /* 48px */
  --spacing-14: 3.5rem;      /* 56px */
  --spacing-16: 4rem;        /* 64px */
  --spacing-20: 5rem;        /* 80px */
  --spacing-24: 6rem;        /* 96px */
  --spacing-28: 7rem;        /* 112px */
  --spacing-32: 8rem;        /* 128px */
  --spacing-36: 9rem;        /* 144px */
  --spacing-40: 10rem;       /* 160px */
  --spacing-44: 11rem;       /* 176px */
  --spacing-48: 12rem;       /* 192px */
  --spacing-52: 13rem;       /* 208px */
  --spacing-56: 14rem;       /* 224px */
  --spacing-60: 15rem;       /* 240px */
  --spacing-64: 16rem;       /* 256px */
  --spacing-72: 18rem;       /* 288px */
  --spacing-80: 20rem;       /* 320px */
  --spacing-96: 24rem;       /* 384px */

  /* Semantic Spacing (Component-specific) */
  --spacing-section-y: var(--spacing-16);    /* Vertical section padding */
  --spacing-section-x: var(--spacing-6);     /* Horizontal section padding */
  --spacing-card: var(--spacing-6);          /* Card padding */
  --spacing-button-x: var(--spacing-6);      /* Button horizontal padding */
  --spacing-button-y: var(--spacing-3);      /* Button vertical padding */
  --spacing-input: var(--spacing-4);         /* Input field padding */

  /* Gap Sizes (for flexbox/grid) */
  --gap-xs: var(--spacing-1);
  --gap-sm: var(--spacing-2);
  --gap-md: var(--spacing-4);
  --gap-lg: var(--spacing-6);
  --gap-xl: var(--spacing-8);
  --gap-2xl: var(--spacing-12);
  --gap-3xl: var(--spacing-16);
}

/* ============================================
   MARGIN UTILITIES
   ============================================ */

/* Margin - All Sides */
.m-0 { margin: var(--spacing-0) !important; }
.m-px { margin: var(--spacing-px) !important; }
.m-0-5 { margin: var(--spacing-0-5) !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-1-5 { margin: var(--spacing-1-5) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-2-5 { margin: var(--spacing-2-5) !important; }
.m-3 { margin: var(--spacing-3) !important; }
.m-3-5 { margin: var(--spacing-3-5) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-5 { margin: var(--spacing-5) !important; }
.m-6 { margin: var(--spacing-6) !important; }
.m-7 { margin: var(--spacing-7) !important; }
.m-8 { margin: var(--spacing-8) !important; }
.m-9 { margin: var(--spacing-9) !important; }
.m-10 { margin: var(--spacing-10) !important; }
.m-11 { margin: var(--spacing-11) !important; }
.m-12 { margin: var(--spacing-12) !important; }
.m-14 { margin: var(--spacing-14) !important; }
.m-16 { margin: var(--spacing-16) !important; }
.m-20 { margin: var(--spacing-20) !important; }
.m-24 { margin: var(--spacing-24) !important; }
.m-28 { margin: var(--spacing-28) !important; }
.m-32 { margin: var(--spacing-32) !important; }
.m-36 { margin: var(--spacing-36) !important; }
.m-40 { margin: var(--spacing-40) !important; }
.m-auto { margin: auto !important; }

/* Margin - Top */
.mt-0 { margin-top: var(--spacing-0) !important; }
.mt-px { margin-top: var(--spacing-px) !important; }
.mt-0-5 { margin-top: var(--spacing-0-5) !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-1-5 { margin-top: var(--spacing-1-5) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-2-5 { margin-top: var(--spacing-2-5) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-3-5 { margin-top: var(--spacing-3-5) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-7 { margin-top: var(--spacing-7) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mt-9 { margin-top: var(--spacing-9) !important; }
.mt-10 { margin-top: var(--spacing-10) !important; }
.mt-11 { margin-top: var(--spacing-11) !important; }
.mt-12 { margin-top: var(--spacing-12) !important; }
.mt-14 { margin-top: var(--spacing-14) !important; }
.mt-16 { margin-top: var(--spacing-16) !important; }
.mt-20 { margin-top: var(--spacing-20) !important; }
.mt-24 { margin-top: var(--spacing-24) !important; }
.mt-28 { margin-top: var(--spacing-28) !important; }
.mt-32 { margin-top: var(--spacing-32) !important; }
.mt-auto { margin-top: auto !important; }

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

/* Margin - Bottom */
.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-px { margin-bottom: var(--spacing-px) !important; }
.mb-0-5 { margin-bottom: var(--spacing-0-5) !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-1-5 { margin-bottom: var(--spacing-1-5) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-2-5 { margin-bottom: var(--spacing-2-5) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-3-5 { margin-bottom: var(--spacing-3-5) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-7 { margin-bottom: var(--spacing-7) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.mb-9 { margin-bottom: var(--spacing-9) !important; }
.mb-10 { margin-bottom: var(--spacing-10) !important; }
.mb-11 { margin-bottom: var(--spacing-11) !important; }
.mb-12 { margin-bottom: var(--spacing-12) !important; }
.mb-14 { margin-bottom: var(--spacing-14) !important; }
.mb-16 { margin-bottom: var(--spacing-16) !important; }
.mb-20 { margin-bottom: var(--spacing-20) !important; }
.mb-24 { margin-bottom: var(--spacing-24) !important; }
.mb-28 { margin-bottom: var(--spacing-28) !important; }
.mb-32 { margin-bottom: var(--spacing-32) !important; }
.mb-auto { margin-bottom: auto !important; }

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

/* Margin - Horizontal (X-axis) */
.mx-0 { margin-left: var(--spacing-0) !important; margin-right: var(--spacing-0) !important; }
.mx-px { margin-left: var(--spacing-px) !important; margin-right: var(--spacing-px) !important; }
.mx-0-5 { margin-left: var(--spacing-0-5) !important; margin-right: var(--spacing-0-5) !important; }
.mx-1 { margin-left: var(--spacing-1) !important; margin-right: var(--spacing-1) !important; }
.mx-2 { margin-left: var(--spacing-2) !important; margin-right: var(--spacing-2) !important; }
.mx-3 { margin-left: var(--spacing-3) !important; margin-right: var(--spacing-3) !important; }
.mx-4 { margin-left: var(--spacing-4) !important; margin-right: var(--spacing-4) !important; }
.mx-5 { margin-left: var(--spacing-5) !important; margin-right: var(--spacing-5) !important; }
.mx-6 { margin-left: var(--spacing-6) !important; margin-right: var(--spacing-6) !important; }
.mx-8 { margin-left: var(--spacing-8) !important; margin-right: var(--spacing-8) !important; }
.mx-10 { margin-left: var(--spacing-10) !important; margin-right: var(--spacing-10) !important; }
.mx-12 { margin-left: var(--spacing-12) !important; margin-right: var(--spacing-12) !important; }
.mx-16 { margin-left: var(--spacing-16) !important; margin-right: var(--spacing-16) !important; }
.mx-20 { margin-left: var(--spacing-20) !important; margin-right: var(--spacing-20) !important; }
.mx-24 { margin-left: var(--spacing-24) !important; margin-right: var(--spacing-24) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin - Vertical (Y-axis) */
.my-0 { margin-top: var(--spacing-0) !important; margin-bottom: var(--spacing-0) !important; }
.my-px { margin-top: var(--spacing-px) !important; margin-bottom: var(--spacing-px) !important; }
.my-0-5 { margin-top: var(--spacing-0-5) !important; margin-bottom: var(--spacing-0-5) !important; }
.my-1 { margin-top: var(--spacing-1) !important; margin-bottom: var(--spacing-1) !important; }
.my-2 { margin-top: var(--spacing-2) !important; margin-bottom: var(--spacing-2) !important; }
.my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
.my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }
.my-6 { margin-top: var(--spacing-6) !important; margin-bottom: var(--spacing-6) !important; }
.my-8 { margin-top: var(--spacing-8) !important; margin-bottom: var(--spacing-8) !important; }
.my-10 { margin-top: var(--spacing-10) !important; margin-bottom: var(--spacing-10) !important; }
.my-12 { margin-top: var(--spacing-12) !important; margin-bottom: var(--spacing-12) !important; }
.my-16 { margin-top: var(--spacing-16) !important; margin-bottom: var(--spacing-16) !important; }
.my-20 { margin-top: var(--spacing-20) !important; margin-bottom: var(--spacing-20) !important; }
.my-24 { margin-top: var(--spacing-24) !important; margin-bottom: var(--spacing-24) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Negative Margins */
.-m-1 { margin: calc(var(--spacing-1) * -1) !important; }
.-m-2 { margin: calc(var(--spacing-2) * -1) !important; }
.-m-3 { margin: calc(var(--spacing-3) * -1) !important; }
.-m-4 { margin: calc(var(--spacing-4) * -1) !important; }
.-m-6 { margin: calc(var(--spacing-6) * -1) !important; }
.-m-8 { margin: calc(var(--spacing-8) * -1) !important; }

.-mt-1 { margin-top: calc(var(--spacing-1) * -1) !important; }
.-mt-2 { margin-top: calc(var(--spacing-2) * -1) !important; }
.-mt-3 { margin-top: calc(var(--spacing-3) * -1) !important; }
.-mt-4 { margin-top: calc(var(--spacing-4) * -1) !important; }
.-mt-6 { margin-top: calc(var(--spacing-6) * -1) !important; }
.-mt-8 { margin-top: calc(var(--spacing-8) * -1) !important; }

.-ml-1 { margin-left: calc(var(--spacing-1) * -1) !important; }
.-ml-2 { margin-left: calc(var(--spacing-2) * -1) !important; }
.-ml-3 { margin-left: calc(var(--spacing-3) * -1) !important; }
.-ml-4 { margin-left: calc(var(--spacing-4) * -1) !important; }
.-ml-6 { margin-left: calc(var(--spacing-6) * -1) !important; }
.-ml-8 { margin-left: calc(var(--spacing-8) * -1) !important; }

/* ============================================
   PADDING UTILITIES
   ============================================ */

/* Padding - All Sides */
.p-0 { padding: var(--spacing-0) !important; }
.p-px { padding: var(--spacing-px) !important; }
.p-0-5 { padding: var(--spacing-0-5) !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-1-5 { padding: var(--spacing-1-5) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-2-5 { padding: var(--spacing-2-5) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-3-5 { padding: var(--spacing-3-5) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.p-6 { padding: var(--spacing-6) !important; }
.p-7 { padding: var(--spacing-7) !important; }
.p-8 { padding: var(--spacing-8) !important; }
.p-9 { padding: var(--spacing-9) !important; }
.p-10 { padding: var(--spacing-10) !important; }
.p-11 { padding: var(--spacing-11) !important; }
.p-12 { padding: var(--spacing-12) !important; }
.p-14 { padding: var(--spacing-14) !important; }
.p-16 { padding: var(--spacing-16) !important; }
.p-20 { padding: var(--spacing-20) !important; }
.p-24 { padding: var(--spacing-24) !important; }
.p-28 { padding: var(--spacing-28) !important; }
.p-32 { padding: var(--spacing-32) !important; }

/* Padding - Top */
.pt-0 { padding-top: var(--spacing-0) !important; }
.pt-px { padding-top: var(--spacing-px) !important; }
.pt-0-5 { padding-top: var(--spacing-0-5) !important; }
.pt-1 { padding-top: var(--spacing-1) !important; }
.pt-1-5 { padding-top: var(--spacing-1-5) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-2-5 { padding-top: var(--spacing-2-5) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pt-3-5 { padding-top: var(--spacing-3-5) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-5 { padding-top: var(--spacing-5) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pt-7 { padding-top: var(--spacing-7) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }
.pt-9 { padding-top: var(--spacing-9) !important; }
.pt-10 { padding-top: var(--spacing-10) !important; }
.pt-11 { padding-top: var(--spacing-11) !important; }
.pt-12 { padding-top: var(--spacing-12) !important; }
.pt-14 { padding-top: var(--spacing-14) !important; }
.pt-16 { padding-top: var(--spacing-16) !important; }
.pt-20 { padding-top: var(--spacing-20) !important; }
.pt-24 { padding-top: var(--spacing-24) !important; }
.pt-28 { padding-top: var(--spacing-28) !important; }
.pt-32 { padding-top: var(--spacing-32) !important; }

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

/* Padding - Bottom */
.pb-0 { padding-bottom: var(--spacing-0) !important; }
.pb-px { padding-bottom: var(--spacing-px) !important; }
.pb-0-5 { padding-bottom: var(--spacing-0-5) !important; }
.pb-1 { padding-bottom: var(--spacing-1) !important; }
.pb-1-5 { padding-bottom: var(--spacing-1-5) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-2-5 { padding-bottom: var(--spacing-2-5) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.pb-3-5 { padding-bottom: var(--spacing-3-5) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-5 { padding-bottom: var(--spacing-5) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.pb-7 { padding-bottom: var(--spacing-7) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }
.pb-9 { padding-bottom: var(--spacing-9) !important; }
.pb-10 { padding-bottom: var(--spacing-10) !important; }
.pb-11 { padding-bottom: var(--spacing-11) !important; }
.pb-12 { padding-bottom: var(--spacing-12) !important; }
.pb-14 { padding-bottom: var(--spacing-14) !important; }
.pb-16 { padding-bottom: var(--spacing-16) !important; }
.pb-20 { padding-bottom: var(--spacing-20) !important; }
.pb-24 { padding-bottom: var(--spacing-24) !important; }
.pb-28 { padding-bottom: var(--spacing-28) !important; }
.pb-32 { padding-bottom: var(--spacing-32) !important; }

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

/* Padding - Horizontal (X-axis) */
.px-0 { padding-left: var(--spacing-0) !important; padding-right: var(--spacing-0) !important; }
.px-px { padding-left: var(--spacing-px) !important; padding-right: var(--spacing-px) !important; }
.px-0-5 { padding-left: var(--spacing-0-5) !important; padding-right: var(--spacing-0-5) !important; }
.px-1 { padding-left: var(--spacing-1) !important; padding-right: var(--spacing-1) !important; }
.px-2 { padding-left: var(--spacing-2) !important; padding-right: var(--spacing-2) !important; }
.px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
.px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.px-5 { padding-left: var(--spacing-5) !important; padding-right: var(--spacing-5) !important; }
.px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
.px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }
.px-10 { padding-left: var(--spacing-10) !important; padding-right: var(--spacing-10) !important; }
.px-12 { padding-left: var(--spacing-12) !important; padding-right: var(--spacing-12) !important; }
.px-16 { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; }
.px-20 { padding-left: var(--spacing-20) !important; padding-right: var(--spacing-20) !important; }
.px-24 { padding-left: var(--spacing-24) !important; padding-right: var(--spacing-24) !important; }

/* Padding - Vertical (Y-axis) */
.py-0 { padding-top: var(--spacing-0) !important; padding-bottom: var(--spacing-0) !important; }
.py-px { padding-top: var(--spacing-px) !important; padding-bottom: var(--spacing-px) !important; }
.py-0-5 { padding-top: var(--spacing-0-5) !important; padding-bottom: var(--spacing-0-5) !important; }
.py-1 { padding-top: var(--spacing-1) !important; padding-bottom: var(--spacing-1) !important; }
.py-2 { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.py-3 { padding-top: var(--spacing-3) !important; padding-bottom: var(--spacing-3) !important; }
.py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
.py-6 { padding-top: var(--spacing-6) !important; padding-bottom: var(--spacing-6) !important; }
.py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
.py-10 { padding-top: var(--spacing-10) !important; padding-bottom: var(--spacing-10) !important; }
.py-12 { padding-top: var(--spacing-12) !important; padding-bottom: var(--spacing-12) !important; }
.py-16 { padding-top: var(--spacing-16) !important; padding-bottom: var(--spacing-16) !important; }
.py-20 { padding-top: var(--spacing-20) !important; padding-bottom: var(--spacing-20) !important; }
.py-24 { padding-top: var(--spacing-24) !important; padding-bottom: var(--spacing-24) !important; }

/* ============================================
   GAP UTILITIES (Flexbox & Grid)
   ============================================ */

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

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

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

/* ============================================
   SPACE BETWEEN UTILITIES (for flex items)
   ============================================ */

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

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

/* ============================================
   CONTAINER UTILITIES
   ============================================ */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ============================================
   SECTION SPACING UTILITIES
   ============================================ */

.section-spacing {
  padding-top: var(--spacing-section-y);
  padding-bottom: var(--spacing-section-y);
}

.section-spacing-sm {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.section-spacing-lg {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

/* ============================================
   RESPONSIVE SPACING UTILITIES
   ============================================ */

@media (min-width: 768px) {
  .md\:m-0 { margin: var(--spacing-0) !important; }
  .md\:m-4 { margin: var(--spacing-4) !important; }
  .md\:m-8 { margin: var(--spacing-8) !important; }
  .md\:m-12 { margin: var(--spacing-12) !important; }

  .md\:p-0 { padding: var(--spacing-0) !important; }
  .md\:p-4 { padding: var(--spacing-4) !important; }
  .md\:p-8 { padding: var(--spacing-8) !important; }
  .md\:p-12 { padding: var(--spacing-12) !important; }

  .md\:px-6 { padding-left: var(--spacing-6) !important; padding-right: var(--spacing-6) !important; }
  .md\:px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }

  .md\:py-8 { padding-top: var(--spacing-8) !important; padding-bottom: var(--spacing-8) !important; }
  .md\:py-12 { padding-top: var(--spacing-12) !important; padding-bottom: var(--spacing-12) !important; }

  .md\:gap-6 { gap: var(--spacing-6) !important; }
  .md\:gap-8 { gap: var(--spacing-8) !important; }
  .md\:gap-12 { gap: var(--spacing-12) !important; }
}

@media (min-width: 1024px) {
  .lg\:m-0 { margin: var(--spacing-0) !important; }
  .lg\:m-6 { margin: var(--spacing-6) !important; }
  .lg\:m-12 { margin: var(--spacing-12) !important; }
  .lg\:m-16 { margin: var(--spacing-16) !important; }

  .lg\:p-0 { padding: var(--spacing-0) !important; }
  .lg\:p-6 { padding: var(--spacing-6) !important; }
  .lg\:p-12 { padding: var(--spacing-12) !important; }
  .lg\:p-16 { padding: var(--spacing-16) !important; }

  .lg\:px-8 { padding-left: var(--spacing-8) !important; padding-right: var(--spacing-8) !important; }
  .lg\:px-12 { padding-left: var(--spacing-12) !important; padding-right: var(--spacing-12) !important; }

  .lg\:py-12 { padding-top: var(--spacing-12) !important; padding-bottom: var(--spacing-12) !important; }
  .lg\:py-16 { padding-top: var(--spacing-16) !important; padding-bottom: var(--spacing-16) !important; }

  .lg\:gap-8 { gap: var(--spacing-8) !important; }
  .lg\:gap-12 { gap: var(--spacing-12) !important; }
  .lg\:gap-16 { gap: var(--spacing-16) !important; }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}