/* =====================================================
   Padding: p-*, p-top-*, p-right-*, p-bottom-*, p-left-*
   Margin:  m-*, m-top-*, m-right-*, m-bottom-*, m-left-*
   Axes:    p-x-*, p-y-* | m-x-*, m-y-*
===================================================== */

/* -----------------------------
   Spacing tokens  
----------------------------- */
:root{
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
}

/* -----------------------------
   Padding utilities  
----------------------------- */
.p-0  { padding: var(--space-0)  !important; }
.p-4  { padding: var(--space-4)  !important; }
.p-8  { padding: var(--space-8)  !important; }
.p-12 { padding: var(--space-12) !important; }
.p-16 { padding: var(--space-16) !important; }
.p-20 { padding: var(--space-20) !important; }
.p-24 { padding: var(--space-24) !important; }
.p-28 { padding: var(--space-28) !important; }
.p-32 { padding: var(--space-32) !important; }
.p-40 { padding: var(--space-40) !important; }
.p-48 { padding: var(--space-48) !important; }
.p-56 { padding: var(--space-56) !important; }
.p-64 { padding: var(--space-64) !important; }

.p-top-0  { padding-top: var(--space-0)  !important; }
.p-top-4  { padding-top: var(--space-4)  !important; }
.p-top-8  { padding-top: var(--space-8)  !important; }
.p-top-12 { padding-top: var(--space-12) !important; }
.p-top-16 { padding-top: var(--space-16) !important; }
.p-top-20 { padding-top: var(--space-20) !important; }
.p-top-24 { padding-top: var(--space-24) !important; }
.p-top-28 { padding-top: var(--space-28) !important; }
.p-top-32 { padding-top: var(--space-32) !important; }
.p-top-40 { padding-top: var(--space-40) !important; }
.p-top-48 { padding-top: var(--space-48) !important; }
.p-top-56 { padding-top: var(--space-56) !important; }
.p-top-64 { padding-top: var(--space-64) !important; }

.p-right-0  { padding-right: var(--space-0)  !important; }
.p-right-4  { padding-right: var(--space-4)  !important; }
.p-right-8  { padding-right: var(--space-8)  !important; }
.p-right-12 { padding-right: var(--space-12) !important; }
.p-right-16 { padding-right: var(--space-16) !important; }
.p-right-20 { padding-right: var(--space-20) !important; }
.p-right-24 { padding-right: var(--space-24) !important; }
.p-right-28 { padding-right: var(--space-28) !important; }
.p-right-32 { padding-right: var(--space-32) !important; }
.p-right-40 { padding-right: var(--space-40) !important; }
.p-right-48 { padding-right: var(--space-48) !important; }
.p-right-56 { padding-right: var(--space-56) !important; }
.p-right-64 { padding-right: var(--space-64) !important; }

.p-bottom-0  { padding-bottom: var(--space-0)  !important; }
.p-bottom-4  { padding-bottom: var(--space-4)  !important; }
.p-bottom-8  { padding-bottom: var(--space-8)  !important; }
.p-bottom-12 { padding-bottom: var(--space-12) !important; }
.p-bottom-16 { padding-bottom: var(--space-16) !important; }
.p-bottom-20 { padding-bottom: var(--space-20) !important; }
.p-bottom-24 { padding-bottom: var(--space-24) !important; }
.p-bottom-28 { padding-bottom: var(--space-28) !important; }
.p-bottom-32 { padding-bottom: var(--space-32) !important; }
.p-bottom-40 { padding-bottom: var(--space-40) !important; }
.p-bottom-48 { padding-bottom: var(--space-48) !important; }
.p-bottom-56 { padding-bottom: var(--space-56) !important; }
.p-bottom-64 { padding-bottom: var(--space-64) !important; }

.p-left-0  { padding-left: var(--space-0)  !important; }
.p-left-4  { padding-left: var(--space-4)  !important; }
.p-left-8  { padding-left: var(--space-8)  !important; }
.p-left-12 { padding-left: var(--space-12) !important; }
.p-left-16 { padding-left: var(--space-16) !important; }
.p-left-20 { padding-left: var(--space-20) !important; }
.p-left-24 { padding-left: var(--space-24) !important; }
.p-left-28 { padding-left: var(--space-28) !important; }
.p-left-32 { padding-left: var(--space-32) !important; }
.p-left-40 { padding-left: var(--space-40) !important; }
.p-left-48 { padding-left: var(--space-48) !important; }
.p-left-56 { padding-left: var(--space-56) !important; }
.p-left-64 { padding-left: var(--space-64) !important; }

.p-x-0  { padding-left: var(--space-0)  !important; padding-right: var(--space-0)  !important; }
.p-x-4  { padding-left: var(--space-4)  !important; padding-right: var(--space-4)  !important; }
.p-x-8  { padding-left: var(--space-8)  !important; padding-right: var(--space-8)  !important; }
.p-x-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
.p-x-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
.p-x-20 { padding-left: var(--space-20) !important; padding-right: var(--space-20) !important; }
.p-x-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
.p-x-28 { padding-left: var(--space-28) !important; padding-right: var(--space-28) !important; }
.p-x-32 { padding-left: var(--space-32) !important; padding-right: var(--space-32) !important; }
.p-x-40 { padding-left: var(--space-40) !important; padding-right: var(--space-40) !important; }
.p-x-48 { padding-left: var(--space-48) !important; padding-right: var(--space-48) !important; }
.p-x-56 { padding-left: var(--space-56) !important; padding-right: var(--space-56) !important; }
.p-x-64 { padding-left: var(--space-64) !important; padding-right: var(--space-64) !important; }

.p-y-0  { padding-top: var(--space-0)  !important; padding-bottom: var(--space-0)  !important; }
.p-y-4  { padding-top: var(--space-4)  !important; padding-bottom: var(--space-4)  !important; }
.p-y-8  { padding-top: var(--space-8)  !important; padding-bottom: var(--space-8)  !important; }
.p-y-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.p-y-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
.p-y-20 { padding-top: var(--space-20) !important; padding-bottom: var(--space-20) !important; }
.p-y-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }
.p-y-28 { padding-top: var(--space-28) !important; padding-bottom: var(--space-28) !important; }
.p-y-32 { padding-top: var(--space-32) !important; padding-bottom: var(--space-32) !important; }
.p-y-40 { padding-top: var(--space-40) !important; padding-bottom: var(--space-40) !important; }
.p-y-48 { padding-top: var(--space-48) !important; padding-bottom: var(--space-48) !important; }
.p-y-56 { padding-top: var(--space-56) !important; padding-bottom: var(--space-56) !important; }
.p-y-64 { padding-top: var(--space-64) !important; padding-bottom: var(--space-64) !important; }

/* -----------------------------
   Margin utilities  
----------------------------- */
.m-0  { margin: var(--space-0)  !important; }
.m-4  { margin: var(--space-4)  !important; }
.m-8  { margin: var(--space-8)  !important; }
.m-12 { margin: var(--space-12) !important; }
.m-16 { margin: var(--space-16) !important; }
.m-20 { margin: var(--space-20) !important; }
.m-24 { margin: var(--space-24) !important; }
.m-28 { margin: var(--space-28) !important; }
.m-32 { margin: var(--space-32) !important; }
.m-40 { margin: var(--space-40) !important; }
.m-48 { margin: var(--space-48) !important; }
.m-56 { margin: var(--space-56) !important; }
.m-64 { margin: var(--space-64) !important; }

.m-top-0  { margin-top: var(--space-0)  !important; }
.m-top-4  { margin-top: var(--space-4)  !important; }
.m-top-8  { margin-top: var(--space-8)  !important; }
.m-top-12 { margin-top: var(--space-12) !important; }
.m-top-16 { margin-top: var(--space-16) !important; }
.m-top-20 { margin-top: var(--space-20) !important; }
.m-top-24 { margin-top: var(--space-24) !important; }
.m-top-28 { margin-top: var(--space-28) !important; }
.m-top-32 { margin-top: var(--space-32) !important; }
.m-top-40 { margin-top: var(--space-40) !important; }
.m-top-48 { margin-top: var(--space-48) !important; }
.m-top-56 { margin-top: var(--space-56) !important; }
.m-top-64 { margin-top: var(--space-64) !important; }

.m-right-0  { margin-right: var(--space-0)  !important; }
.m-right-4  { margin-right: var(--space-4)  !important; }
.m-right-8  { margin-right: var(--space-8)  !important; }
.m-right-12 { margin-right: var(--space-12) !important; }
.m-right-16 { margin-right: var(--space-16) !important; }
.m-right-20 { margin-right: var(--space-20) !important; }
.m-right-24 { margin-right: var(--space-24) !important; }
.m-right-28 { margin-right: var(--space-28) !important; }
.m-right-32 { margin-right: var(--space-32) !important; }
.m-right-40 { margin-right: var(--space-40) !important; }
.m-right-48 { margin-right: var(--space-48) !important; }
.m-right-56 { margin-right: var(--space-56) !important; }
.m-right-64 { margin-right: var(--space-64) !important; }

.m-bottom-0  { margin-bottom: var(--space-0)  !important; }
.m-bottom-4  { margin-bottom: var(--space-4)  !important; }
.m-bottom-8  { margin-bottom: var(--space-8)  !important; }
.m-bottom-12 { margin-bottom: var(--space-12) !important; }
.m-bottom-16 { margin-bottom: var(--space-16) !important; }
.m-bottom-20 { margin-bottom: var(--space-20) !important; }
.m-bottom-24 { margin-bottom: var(--space-24) !important; }
.m-bottom-28 { margin-bottom: var(--space-28) !important; }
.m-bottom-32 { margin-bottom: var(--space-32) !important; }
.m-bottom-40 { margin-bottom: var(--space-40) !important; }
.m-bottom-48 { margin-bottom: var(--space-48) !important; }
.m-bottom-56 { margin-bottom: var(--space-56) !important; }
.m-bottom-64 { margin-bottom: var(--space-64) !important; }

.m-left-0  { margin-left: var(--space-0)  !important; }
.m-left-4  { margin-left: var(--space-4)  !important; }
.m-left-8  { margin-left: var(--space-8)  !important; }
.m-left-12 { margin-left: var(--space-12) !important; }
.m-left-16 { margin-left: var(--space-16) !important; }
.m-left-20 { margin-left: var(--space-20) !important; }
.m-left-24 { margin-left: var(--space-24) !important; }
.m-left-28 { margin-left: var(--space-28) !important; }
.m-left-32 { margin-left: var(--space-32) !important; }
.m-left-40 { margin-left: var(--space-40) !important; }
.m-left-48 { margin-left: var(--space-48) !important; }
.m-left-56 { margin-left: var(--space-56) !important; }
.m-left-64 { margin-left: var(--space-64) !important; }

.m-x-0  { margin-left: var(--space-0)  !important; margin-right: var(--space-0)  !important; }
.m-x-4  { margin-left: var(--space-4)  !important; margin-right: var(--space-4)  !important; }
.m-x-8  { margin-left: var(--space-8)  !important; margin-right: var(--space-8)  !important; }
.m-x-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.m-x-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
.m-x-20 { margin-left: var(--space-20) !important; margin-right: var(--space-20) !important; }
.m-x-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }
.m-x-28 { margin-left: var(--space-28) !important; margin-right: var(--space-28) !important; }
.m-x-32 { margin-left: var(--space-32) !important; margin-right: var(--space-32) !important; }
.m-x-40 { margin-left: var(--space-40) !important; margin-right: var(--space-40) !important; }
.m-x-48 { margin-left: var(--space-48) !important; margin-right: var(--space-48) !important; }
.m-x-56 { margin-left: var(--space-56) !important; margin-right: var(--space-56) !important; }
.m-x-64 { margin-left: var(--space-64) !important; margin-right: var(--space-64) !important; }

.m-y-0  { margin-top: var(--space-0)  !important; margin-bottom: var(--space-0)  !important; }
.m-y-4  { margin-top: var(--space-4)  !important; margin-bottom: var(--space-4)  !important; }
.m-y-8  { margin-top: var(--space-8)  !important; margin-bottom: var(--space-8)  !important; }
.m-y-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
.m-y-16 { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
.m-y-20 { margin-top: var(--space-20) !important; margin-bottom: var(--space-20) !important; }
.m-y-24 { margin-top: var(--space-24) !important; margin-bottom: var(--space-24) !important; }
.m-y-28 { margin-top: var(--space-28) !important; margin-bottom: var(--space-28) !important; }
.m-y-32 { margin-top: var(--space-32) !important; margin-bottom: var(--space-32) !important; }
.m-y-40 { margin-top: var(--space-40) !important; margin-bottom: var(--space-40) !important; }
.m-y-48 { margin-top: var(--space-48) !important; margin-bottom: var(--space-48) !important; }
.m-y-56 { margin-top: var(--space-56) !important; margin-bottom: var(--space-56) !important; }
.m-y-64 { margin-top: var(--space-64) !important; margin-bottom: var(--space-64) !important; }

.m-left-auto  { margin-left: auto !important; }
.m-right-auto { margin-right: auto !important; }

/* Footer safe helper (desktop-only: sem safe-area) */
.p-bottom-footer {
  padding-bottom: 76px !important;
}

/* Screen helpers */
.min-100-screen { min-height: 100vh; }
.min-90-screen  { min-height: 90vh; }
.min-80-screen  { min-height: 80vh; }
.min-70-screen  { min-height: 70vh; }