/* ============================================
   DAGDA TEMPLATE - Spacing Utilities
   Classes utilitaires margin, padding, gap
   ============================================ */

@layer utilities {
  /* ========== MARGIN ========== */
  .m-0 { margin: 0; }
  
  /* ========== MARGIN TOP ========== */
  .mt-0 { margin-top: 0; }
  .mt-1 { margin-top: var(--space-xs); }   /* 0.25rem */
  .mt-2 { margin-top: var(--space-sm); }   /* 0.5rem */
  .mt-3 { margin-top: var(--space-md); }   /* 1rem */
  .mt-4 { margin-top: var(--space-lg); }   /* 1.5rem */
  .mt-5 { margin-top: var(--space-xl); }   /* 2rem */
  .mt-6 { margin-top: var(--space-2xl); }  /* 3rem */
  
  /* ========== MARGIN BOTTOM ========== */
  .mb-0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: var(--space-xs); }
  .mb-2 { margin-bottom: var(--space-sm); }
  .mb-3 { margin-bottom: var(--space-md); }
  .mb-4 { margin-bottom: var(--space-lg); }
  .mb-5 { margin-bottom: var(--space-xl); }
  .mb-6 { margin-bottom: var(--space-2xl); }
  
  /* ========== MARGIN LEFT ========== */
  .ml-0 { margin-left: 0; }
  .ml-1 { margin-left: var(--space-xs); }
  .ml-2 { margin-left: var(--space-sm); }
  .ml-3 { margin-left: var(--space-md); }
  .ml-4 { margin-left: var(--space-lg); }
  .ml-5 { margin-left: var(--space-xl); }
  .ml-6 { margin-left: var(--space-2xl); }
  
  /* ========== MARGIN RIGHT ========== */
  .mr-0 { margin-right: 0; }
  .mr-1 { margin-right: var(--space-xs); }
  .mr-2 { margin-right: var(--space-sm); }
  .mr-3 { margin-right: var(--space-md); }
  .mr-4 { margin-right: var(--space-lg); }
  .mr-5 { margin-right: var(--space-xl); }
  .mr-6 { margin-right: var(--space-2xl); }
  
  /* ========== PADDING ========== */
  .p-0 { padding: 0; }
  .p-1 { padding: var(--space-xs); }
  .p-2 { padding: var(--space-sm); }
  .p-3 { padding: var(--space-md); }
  .p-4 { padding: var(--space-lg); }
  .p-5 { padding: var(--space-xl); }
  .p-6 { padding: var(--space-2xl); }
  
  /* ========== PADDING TOP ========== */
  .pt-0 { padding-top: 0; }
  .pt-1 { padding-top: var(--space-xs); }
  .pt-2 { padding-top: var(--space-sm); }
  .pt-3 { padding-top: var(--space-md); }
  .pt-4 { padding-top: var(--space-lg); }
  .pt-5 { padding-top: var(--space-xl); }
  .pt-6 { padding-top: var(--space-2xl); }
  
  /* ========== PADDING BOTTOM ========== */
  .pb-0 { padding-bottom: 0; }
  .pb-1 { padding-bottom: var(--space-xs); }
  .pb-2 { padding-bottom: var(--space-sm); }
  .pb-3 { padding-bottom: var(--space-md); }
  .pb-4 { padding-bottom: var(--space-lg); }
  .pb-5 { padding-bottom: var(--space-xl); }
  .pb-6 { padding-bottom: var(--space-2xl); }
  
  /* ========== GAP (pour flex/grid) ========== */
  .gap-0 { gap: 0; }
  .gap-1 { gap: var(--space-xs); }
  .gap-2 { gap: var(--space-sm); }
  .gap-3 { gap: var(--space-md); }
  .gap-4 { gap: var(--space-lg); }
  .gap-5 { gap: var(--space-xl); }
  .gap-6 { gap: var(--space-2xl); }
}