/* Variables de spacing (primitives) */
:root {
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 24px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-90: 90px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-999: 999px;
}

/* Mobile: sobrescribe todos los valores que cambian según tokens Figma/MCP */
@media (max-width: 900px) {
  :root {
    --spacing-1: 1px;
    --spacing-2: 2px;
    --spacing-3: 3px;
    --spacing-4: 20px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 12px;
    --spacing-18: 18px;
    --spacing-20: 16px;
    --spacing-24: 20px;
    --spacing-32: 16px;
    --spacing-40: 20px;
    --spacing-48: 24px;
    --spacing-56: 32px;
    --spacing-64: 40px;
    --spacing-72: 48px;
    --spacing-80: 64px;
    --spacing-90: 72px;
    --spacing-100: 80px;
    --spacing-120: 100px;
    --spacing-140: 120px;
    --spacing-999: 999px;
  }
}

.mt-0, .pt-0 { margin-top: 0px !important; padding-top: 0px !important; }
.mb-0, .pb-0 { margin-bottom: 0px !important; padding-bottom: 0px !important; }

/* Utilidades de espaciado vertical (desktop y mobile) */
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mt-10 { margin-top: var(--spacing-10) !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-18 { margin-top: var(--spacing-18) !important; }
.mt-20 { margin-top: var(--spacing-20) !important; }
.mt-24 { margin-top: var(--spacing-24) !important; }
.mt-32 { margin-top: var(--spacing-32) !important; }
.mt-40 { margin-top: var(--spacing-40) !important; }
.mt-48 { margin-top: var(--spacing-48) !important; }
.mt-56 { margin-top: var(--spacing-56) !important; }
.mt-64 { margin-top: var(--spacing-64) !important; }
.mt-72 { margin-top: var(--spacing-72) !important; }
.mt-80 { margin-top: var(--spacing-80) !important; }
.mt-90 { margin-top: var(--spacing-90) !important; }
.mt-100 { margin-top: var(--spacing-100) !important; }
.mt-120 { margin-top: var(--spacing-120) !important; }
.mt-140 { margin-top: var(--spacing-140) !important; }
.mt-999 { margin-top: var(--spacing-999) !important; }

.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.mb-10 { margin-bottom: var(--spacing-10) !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-18 { margin-bottom: var(--spacing-18) !important; }
.mb-20 { margin-bottom: var(--spacing-20) !important; }
.mb-24 { margin-bottom: var(--spacing-24) !important; }
.mb-32 { margin-bottom: var(--spacing-32) !important; }
.mb-40 { margin-bottom: var(--spacing-40) !important; }
.mb-48 { margin-bottom: var(--spacing-48) !important; }
.mb-56 { margin-bottom: var(--spacing-56) !important; }
.mb-64 { margin-bottom: var(--spacing-64) !important; }
.mb-72 { margin-bottom: var(--spacing-72) !important; }
.mb-80 { margin-bottom: var(--spacing-80) !important; }
.mb-90 { margin-bottom: var(--spacing-90) !important; }
.mb-100 { margin-bottom: var(--spacing-100) !important; }
.mb-120 { margin-bottom: var(--spacing-120) !important; }
.mb-140 { margin-bottom: var(--spacing-140) !important; }
.mb-999 { margin-bottom: var(--spacing-999) !important; }

.pt-1 { padding-top: var(--spacing-1) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }
.pt-8 { padding-top: var(--spacing-8) !important; }
.pt-10 { padding-top: var(--spacing-10) !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-18 { padding-top: var(--spacing-18) !important; }
.pt-20 { padding-top: var(--spacing-20) !important; }
.pt-24 { padding-top: var(--spacing-24) !important; }
.pt-32 { padding-top: var(--spacing-32) !important; }
.pt-40 { padding-top: var(--spacing-40) !important; }
.pt-48 { padding-top: var(--spacing-48) !important; }
.pt-56 { padding-top: var(--spacing-56) !important; }
.pt-64 { padding-top: var(--spacing-64) !important; }
.pt-72 { padding-top: var(--spacing-72) !important; }
.pt-80 { padding-top: var(--spacing-80) !important; }
.pt-90 { padding-top: var(--spacing-90) !important; }
.pt-100 { padding-top: var(--spacing-100) !important; }
.pt-120 { padding-top: var(--spacing-120) !important; }
.pt-140 { padding-top: var(--spacing-140) !important; }
.pt-999 { padding-top: var(--spacing-999) !important; }

.pb-1 { padding-bottom: var(--spacing-1) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }
.pb-8 { padding-bottom: var(--spacing-8) !important; }
.pb-10 { padding-bottom: var(--spacing-10) !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-18 { padding-bottom: var(--spacing-18) !important; }
.pb-20 { padding-bottom: var(--spacing-20) !important; }
.pb-24 { padding-bottom: var(--spacing-24) !important; }
.pb-32 { padding-bottom: var(--spacing-32) !important; }
.pb-40 { padding-bottom: var(--spacing-40) !important; }
.pb-48 { padding-bottom: var(--spacing-48) !important; }
.pb-56 { padding-bottom: var(--spacing-56) !important; }
.pb-64 { padding-bottom: var(--spacing-64) !important; }
.pb-72 { padding-bottom: var(--spacing-72) !important; }
.pb-80 { padding-bottom: var(--spacing-80) !important; }
.pb-90 { padding-bottom: var(--spacing-90) !important; }
.pb-100 { padding-bottom: var(--spacing-100) !important; }
.pb-120 { padding-bottom: var(--spacing-120) !important; }
.pb-140 { padding-bottom: var(--spacing-140) !important; }
.pb-999 { padding-bottom: var(--spacing-999) !important; }