/**
 * ============================================================================
 * CTT DESIGN SYSTEM - SPACING UTILITY CLASSES
 * ============================================================================
 * 
 * Token-based spacing utilities for consistent margins and padding across the
 * design system. All utilities reference CORE SPACE tokens from new-tokens.css
 * built on a 4px base grid system.
 * 
 * ----------------------------------------------------------------------------
 * TOKEN HIERARCHY
 * ----------------------------------------------------------------------------
 * Spacing utilities use CORE tokens that provide system-level dimensions:
 * 
 * Brand → CORE SPACE TOKENS → Spacing Utilities
 * 
 * CORE SPACE TOKENS (--ctt-core-space-*):
 *   Direct pixel values aligned to 4px grid system:
 *   - space-0   → 0px
 *   - space-1   → 4px
 *   - space-2   → 8px
 *   - space-3   → 12px
 *   - space-4   → 16px
 *   - space-5   → 20px
 *   - space-6   → 24px
 *   - space-8   → 32px
 *   - space-10  → 40px
 *   - space-12  → 48px
 *   - space-16  → 64px
 *   - space-20  → 80px
 *   - space-24  → 96px
 *   - space-28  → 112px
 *   - space-32  → 128px
 *   - space-px  → 1px
 * 
 * ----------------------------------------------------------------------------
 * SPACING SCALE
 * ----------------------------------------------------------------------------
 * The utility class numbers map directly to actual pixel values on a 4px grid:
 * 
 *   Class → Pixel Value → Token Used
 *   ──────────────────────────────────
 *   *-0   → 0px          → space-0
 *   *-1   → 4px          → space-1
 *   *-2   → 8px          → space-2
 *   *-3   → 12px         → space-3
 *   *-4   → 16px         → space-4
 *   *-5   → 20px         → space-5
 *   *-6   → 24px         → space-6
 *   *-8   → 32px         → space-8
 *   *-10  → 40px         → space-10
 *   *-12  → 48px         → space-12
 *   *-16  → 64px         → space-16
 *   *-20  → 80px         → space-20
 *   *-24  → 96px         → space-24
 *   *-28  → 112px        → space-28
 *   *-32  → 128px        → space-32
 *   *-px  → 1px          → space-px
 * 
 * Note: Scale intentionally skips 7, 9, 11, 13, 14, etc. to maintain a
 * consistent rhythm aligned with the 4px grid system.
 * 
 * ----------------------------------------------------------------------------
 * PADDING UTILITIES
 * ----------------------------------------------------------------------------
 * All sides:   .ctt-p-{size}   → padding: {size}
 * Horizontal:  .ctt-px-{size}  → padding-left + padding-right: {size}
 * Vertical:    .ctt-py-{size}  → padding-top + padding-bottom: {size}
 * Top:         .ctt-pt-{size}  → padding-top: {size}
 * Right:       .ctt-pr-{size}  → padding-right: {size}
 * Bottom:      .ctt-pb-{size}  → padding-bottom: {size}
 * Left:        .ctt-pl-{size}  → padding-left: {size}
 * 
 * Examples:
 *   <div class="ctt-p-4">              <!-- 16px padding all sides -->
 *   <div class="ctt-px-6 ctt-py-2">    <!-- 24px horizontal, 8px vertical -->
 *   <div class="ctt-pt-8 ctt-pb-4">    <!-- 32px top, 16px bottom -->
 * 
 * ----------------------------------------------------------------------------
 * MARGIN UTILITIES
 * ----------------------------------------------------------------------------
 * All sides:   .ctt-m-{size}   → margin: {size}
 * Horizontal:  .ctt-mx-{size}  → margin-left + margin-right: {size}
 * Vertical:    .ctt-my-{size}  → margin-top + margin-bottom: {size}
 * Top:         .ctt-mt-{size}  → margin-top: {size}
 * Right:       .ctt-mr-{size}  → margin-right: {size}
 * Bottom:      .ctt-mb-{size}  → margin-bottom: {size}
 * Left:        .ctt-ml-{size}  → margin-left: {size}
 * 
 * Auto margins (centering):
 *   .ctt-m-auto   → margin: auto
 *   .ctt-mx-auto  → margin-left: auto; margin-right: auto (horizontal center)
 *   .ctt-my-auto  → margin-top: auto; margin-bottom: auto (vertical center)
 *   .ctt-mt-auto, .ctt-mr-auto, .ctt-mb-auto, .ctt-ml-auto
 * 
 * Examples:
 *   <div class="ctt-m-4">              <!-- 16px margin all sides -->
 *   <div class="ctt-mx-auto">          <!-- Horizontally centered -->
 *   <div class="ctt-mt-8 ctt-mb-4">    <!-- 32px top, 16px bottom -->
 * 
 * ----------------------------------------------------------------------------
 * NEGATIVE MARGINS
 * ----------------------------------------------------------------------------
 * Used for overlapping elements or pulling content:
 *   .ctt--m-{size}   → margin: -{size} (all sides)
 *   .ctt--mx-{size}  → negative horizontal margins
 *   .ctt--my-{size}  → negative vertical margins
 *   .ctt--mt-{size}, .ctt--mr-{size}, .ctt--mb-{size}, .ctt--ml-{size}
 * 
 * Examples:
 *   <div class="ctt--mt-4">            <!-- Pull up by 16px -->
 *   <div class="ctt--mx-2">            <!-- Extend 8px on both sides -->
 * 
 * ----------------------------------------------------------------------------
 * RESPONSIVE SPACING
 * ----------------------------------------------------------------------------
 * All spacing utilities can be combined with responsive design patterns:
 *   - Use CSS media queries to override spacing at different breakpoints
 *   - Stack multiple utilities for complex responsive layouts
 *   - Combine with layout utilities for complete responsive control
 * 
 * Example:
 *   <div class="ctt-p-2 ctt-m-4">
 *     @media (min-width: 768px) { .ctt-p-4 .ctt-m-8 }
 *   </div>
 * 
 * ----------------------------------------------------------------------------
 * BEST PRACTICES
 * ----------------------------------------------------------------------------
 * 1. Prefer spacing utilities over custom CSS for consistency
 * 2. Use the spacing scale (4px grid) - avoid arbitrary values
 * 3. Use padding for internal spacing, margin for external spacing
 * 4. Use mx-auto for horizontal centering of fixed-width elements
 * 5. Use negative margins sparingly - they can break layouts if misused
 * 6. Combine utilities for complex spacing: "ctt-px-6 ctt-py-4"
 * 7. Consider component spacing tokens for reusable patterns
 * 
 * ============================================================================
 */

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

/* All sides padding - Apply same padding to all four sides */
.ctt-p-0 {
  padding: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-p-1 {
  padding: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-p-2 {
  padding: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-p-3 {
  padding: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-p-4 {
  padding: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-p-6 {
  padding: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-p-8 {
  padding: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-p-10 {
  padding: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-p-12 {
  padding: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-p-16 {
  padding: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-p-20 {
  padding: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Horizontal padding (left and right) - Apply padding to horizontal axis */
.ctt-px-0 {
  padding-left: var(--ctt-core-space-0) !important;
  padding-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-px-1 {
  padding-left: var(--ctt-core-space-1) !important;
  padding-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-px-2 {
  padding-left: var(--ctt-core-space-2) !important;
  padding-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-px-3 {
  padding-left: var(--ctt-core-space-3) !important;
  padding-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-px-4 {
  padding-left: var(--ctt-core-space-4) !important;
  padding-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-px-6 {
  padding-left: var(--ctt-core-space-6) !important;
  padding-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-px-8 {
  padding-left: var(--ctt-core-space-8) !important;
  padding-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-px-10 {
  padding-left: var(--ctt-core-space-10) !important;
  padding-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-px-12 {
  padding-left: var(--ctt-core-space-12) !important;
  padding-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-px-16 {
  padding-left: var(--ctt-core-space-16) !important;
  padding-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-px-20 {
  padding-left: var(--ctt-core-space-20) !important;
  padding-right: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Vertical padding (top and bottom) - Apply padding to vertical axis */
.ctt-py-0 {
  padding-top: var(--ctt-core-space-0) !important;
  padding-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-py-1 {
  padding-top: var(--ctt-core-space-1) !important;
  padding-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-py-2 {
  padding-top: var(--ctt-core-space-2) !important;
  padding-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-py-3 {
  padding-top: var(--ctt-core-space-3) !important;
  padding-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-py-4 {
  padding-top: var(--ctt-core-space-4) !important;
  padding-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-py-6 {
  padding-top: var(--ctt-core-space-6) !important;
  padding-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-py-8 {
  padding-top: var(--ctt-core-space-8) !important;
  padding-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-py-10 {
  padding-top: var(--ctt-core-space-10) !important;
  padding-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-py-12 {
  padding-top: var(--ctt-core-space-12) !important;
  padding-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-py-16 {
  padding-top: var(--ctt-core-space-16) !important;
  padding-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-py-20 {
  padding-top: var(--ctt-core-space-20) !important;
  padding-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Top */
.ctt-pt-0 {
  padding-top: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pt-1 {
  padding-top: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pt-2 {
  padding-top: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pt-3 {
  padding-top: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pt-4 {
  padding-top: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pt-6 {
  padding-top: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pt-8 {
  padding-top: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pt-10 {
  padding-top: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pt-12 {
  padding-top: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pt-16 {
  padding-top: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pt-20 {
  padding-top: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Right */
.ctt-pr-0 {
  padding-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pr-1 {
  padding-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pr-2 {
  padding-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pr-3 {
  padding-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pr-4 {
  padding-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pr-6 {
  padding-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pr-8 {
  padding-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pr-10 {
  padding-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pr-12 {
  padding-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pr-16 {
  padding-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pr-20 {
  padding-right: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Bottom */
.ctt-pb-0 {
  padding-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pb-1 {
  padding-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pb-2 {
  padding-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pb-3 {
  padding-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pb-4 {
  padding-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pb-6 {
  padding-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pb-8 {
  padding-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pb-10 {
  padding-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pb-12 {
  padding-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pb-16 {
  padding-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pb-20 {
  padding-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Individual side padding - Left */
.ctt-pl-0 {
  padding-left: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-pl-1 {
  padding-left: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-pl-2 {
  padding-left: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-pl-3 {
  padding-left: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-pl-4 {
  padding-left: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-pl-6 {
  padding-left: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-pl-8 {
  padding-left: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-pl-10 {
  padding-left: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-pl-12 {
  padding-left: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-pl-16 {
  padding-left: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-pl-20 {
  padding-left: var(--ctt-core-space-20) !important;
} /* → 80px */

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

/* All sides margin - Apply same margin to all four sides */
.ctt-m-0 {
  margin: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-m-1 {
  margin: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-m-2 {
  margin: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-m-3 {
  margin: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-m-4 {
  margin: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-m-6 {
  margin: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-m-8 {
  margin: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-m-10 {
  margin: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-m-12 {
  margin: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-m-16 {
  margin: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-m-20 {
  margin: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Auto margin - For centering elements */
.ctt-m-auto {
  margin: auto !important;
} /* → auto */

/* Horizontal margin (left and right) - Apply margin to horizontal axis */
.ctt-mx-0 {
  margin-left: var(--ctt-core-space-0) !important;
  margin-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mx-1 {
  margin-left: var(--ctt-core-space-1) !important;
  margin-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mx-2 {
  margin-left: var(--ctt-core-space-2) !important;
  margin-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mx-3 {
  margin-left: var(--ctt-core-space-3) !important;
  margin-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mx-4 {
  margin-left: var(--ctt-core-space-4) !important;
  margin-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mx-6 {
  margin-left: var(--ctt-core-space-6) !important;
  margin-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mx-8 {
  margin-left: var(--ctt-core-space-8) !important;
  margin-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mx-10 {
  margin-left: var(--ctt-core-space-10) !important;
  margin-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mx-12 {
  margin-left: var(--ctt-core-space-12) !important;
  margin-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mx-16 {
  margin-left: var(--ctt-core-space-16) !important;
  margin-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mx-20 {
  margin-left: var(--ctt-core-space-20) !important;
  margin-right: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
} /* → auto (horizontal center) */

/* Vertical margin (top and bottom) - Apply margin to vertical axis */
.ctt-my-0 {
  margin-top: var(--ctt-core-space-0) !important;
  margin-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-my-1 {
  margin-top: var(--ctt-core-space-1) !important;
  margin-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-my-2 {
  margin-top: var(--ctt-core-space-2) !important;
  margin-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-my-3 {
  margin-top: var(--ctt-core-space-3) !important;
  margin-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-my-4 {
  margin-top: var(--ctt-core-space-4) !important;
  margin-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-my-6 {
  margin-top: var(--ctt-core-space-6) !important;
  margin-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-my-8 {
  margin-top: var(--ctt-core-space-8) !important;
  margin-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-my-10 {
  margin-top: var(--ctt-core-space-10) !important;
  margin-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-my-12 {
  margin-top: var(--ctt-core-space-12) !important;
  margin-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-my-16 {
  margin-top: var(--ctt-core-space-16) !important;
  margin-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-my-20 {
  margin-top: var(--ctt-core-space-20) !important;
  margin-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
} /* → auto (vertical center) */

/* Individual side margin - Top */
.ctt-mt-0 {
  margin-top: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mt-1 {
  margin-top: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mt-2 {
  margin-top: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mt-3 {
  margin-top: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mt-4 {
  margin-top: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mt-6 {
  margin-top: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mt-8 {
  margin-top: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mt-10 {
  margin-top: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mt-12 {
  margin-top: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mt-16 {
  margin-top: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mt-20 {
  margin-top: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mt-auto {
  margin-top: auto !important;
} /* → auto */

/* Individual side margin - Right */
.ctt-mr-0 {
  margin-right: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mr-1 {
  margin-right: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mr-2 {
  margin-right: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mr-3 {
  margin-right: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mr-4 {
  margin-right: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mr-6 {
  margin-right: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mr-8 {
  margin-right: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mr-10 {
  margin-right: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mr-12 {
  margin-right: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mr-16 {
  margin-right: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mr-20 {
  margin-right: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mr-auto {
  margin-right: auto !important;
} /* → auto */

/* Individual side margin - Bottom */
.ctt-mb-0 {
  margin-bottom: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-mb-1 {
  margin-bottom: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-mb-2 {
  margin-bottom: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-mb-3 {
  margin-bottom: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-mb-4 {
  margin-bottom: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-mb-6 {
  margin-bottom: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-mb-8 {
  margin-bottom: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-mb-10 {
  margin-bottom: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-mb-12 {
  margin-bottom: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-mb-16 {
  margin-bottom: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-mb-20 {
  margin-bottom: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-mb-auto {
  margin-bottom: auto !important;
} /* → auto */

/* Individual side margin - Left */
.ctt-ml-0 {
  margin-left: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-ml-1 {
  margin-left: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-ml-2 {
  margin-left: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-ml-3 {
  margin-left: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-ml-4 {
  margin-left: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-ml-6 {
  margin-left: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-ml-8 {
  margin-left: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-ml-10 {
  margin-left: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-ml-12 {
  margin-left: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-ml-16 {
  margin-left: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-ml-20 {
  margin-left: var(--ctt-core-space-20) !important;
} /* → 80px */
.ctt-ml-auto {
  margin-left: auto !important;
} /* → auto */

/* ==========================================================================
   NEGATIVE MARGIN UTILITIES
   ========================================================================== */
/* 
 * Negative margins for pulling elements or creating overlaps.
 * Use sparingly and with caution - can break layouts if misused.
 * Common use cases: overlapping cards, pull-up effects, extending beyond container
 */

/* Negative margin - All sides */
.ctt--m-1 {
  margin: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--m-2 {
  margin: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--m-3 {
  margin: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--m-4 {
  margin: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--m-6 {
  margin: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--m-8 {
  margin: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */
.ctt--m-10 {
  margin: calc(var(--ctt-core-space-10) * -1) !important;
} /* → -40px */
.ctt--m-12 {
  margin: calc(var(--ctt-core-space-12) * -1) !important;
} /* → -48px */

/* Negative margin - Horizontal */
.ctt--mx-1 {
  margin-left: calc(var(--ctt-core-space-1) * -1) !important;
  margin-right: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mx-2 {
  margin-left: calc(var(--ctt-core-space-2) * -1) !important;
  margin-right: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mx-3 {
  margin-left: calc(var(--ctt-core-space-3) * -1) !important;
  margin-right: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mx-4 {
  margin-left: calc(var(--ctt-core-space-4) * -1) !important;
  margin-right: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mx-6 {
  margin-left: calc(var(--ctt-core-space-6) * -1) !important;
  margin-right: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mx-8 {
  margin-left: calc(var(--ctt-core-space-8) * -1) !important;
  margin-right: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* Negative margin - Vertical */
.ctt--my-1 {
  margin-top: calc(var(--ctt-core-space-1) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--my-2 {
  margin-top: calc(var(--ctt-core-space-2) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--my-3 {
  margin-top: calc(var(--ctt-core-space-3) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--my-4 {
  margin-top: calc(var(--ctt-core-space-4) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--my-6 {
  margin-top: calc(var(--ctt-core-space-6) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--my-8 {
  margin-top: calc(var(--ctt-core-space-8) * -1) !important;
  margin-bottom: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* Negative margin - Top */
.ctt--mt-1 {
  margin-top: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mt-2 {
  margin-top: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mt-3 {
  margin-top: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mt-4 {
  margin-top: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mt-6 {
  margin-top: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mt-8 {
  margin-top: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */
.ctt--mt-10 {
  margin-top: calc(var(--ctt-core-space-10) * -1) !important;
} /* → -40px */
.ctt--mt-12 {
  margin-top: calc(var(--ctt-core-space-12) * -1) !important;
} /* → -48px */

/* Negative margin - Right */
.ctt--mr-1 {
  margin-right: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mr-2 {
  margin-right: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mr-3 {
  margin-right: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mr-4 {
  margin-right: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mr-6 {
  margin-right: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mr-8 {
  margin-right: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* Negative margin - Bottom */
.ctt--mb-1 {
  margin-bottom: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--mb-2 {
  margin-bottom: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--mb-3 {
  margin-bottom: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--mb-4 {
  margin-bottom: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--mb-6 {
  margin-bottom: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--mb-8 {
  margin-bottom: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */
.ctt--mb-10 {
  margin-bottom: calc(var(--ctt-core-space-10) * -1) !important;
} /* → -40px */
.ctt--mb-12 {
  margin-bottom: calc(var(--ctt-core-space-12) * -1) !important;
} /* → -48px */

/* Negative margin - Left */
.ctt--ml-1 {
  margin-left: calc(var(--ctt-core-space-1) * -1) !important;
} /* → -4px */
.ctt--ml-2 {
  margin-left: calc(var(--ctt-core-space-2) * -1) !important;
} /* → -8px */
.ctt--ml-3 {
  margin-left: calc(var(--ctt-core-space-3) * -1) !important;
} /* → -12px */
.ctt--ml-4 {
  margin-left: calc(var(--ctt-core-space-4) * -1) !important;
} /* → -16px */
.ctt--ml-6 {
  margin-left: calc(var(--ctt-core-space-6) * -1) !important;
} /* → -24px */
.ctt--ml-8 {
  margin-left: calc(var(--ctt-core-space-8) * -1) !important;
} /* → -32px */

/* ==========================================================================
   GAP UTILITIES (for Flexbox and Grid Layouts)
   ========================================================================== */
/*
 * Gap utilities control spacing between grid/flexbox items without using margins.
 * These are particularly useful for responsive layouts and modern CSS grid/flexbox patterns.
 * 
 * Usage:
 *   .ctt-gap-{size}    → gap (both row and column)
 *   .ctt-gap-x-{size}  → column-gap (horizontal spacing)
 *   .ctt-gap-y-{size}  → row-gap (vertical spacing)
 */

/* Gap - Both directions (row and column) */
.ctt-gap-0 {
  gap: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-gap-1 {
  gap: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-gap-2 {
  gap: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-gap-3 {
  gap: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-gap-4 {
  gap: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-gap-6 {
  gap: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-gap-8 {
  gap: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-gap-10 {
  gap: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-gap-12 {
  gap: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-gap-16 {
  gap: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-gap-20 {
  gap: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Column gap - Horizontal spacing between columns */
.ctt-gap-x-0 {
  column-gap: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-gap-x-1 {
  column-gap: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-gap-x-2 {
  column-gap: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-gap-x-3 {
  column-gap: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-gap-x-4 {
  column-gap: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-gap-x-6 {
  column-gap: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-gap-x-8 {
  column-gap: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-gap-x-10 {
  column-gap: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-gap-x-12 {
  column-gap: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-gap-x-16 {
  column-gap: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-gap-x-20 {
  column-gap: var(--ctt-core-space-20) !important;
} /* → 80px */

/* Row gap - Vertical spacing between rows */
.ctt-gap-y-0 {
  row-gap: var(--ctt-core-space-0) !important;
} /* → 0px */
.ctt-gap-y-1 {
  row-gap: var(--ctt-core-space-1) !important;
} /* → 4px */
.ctt-gap-y-2 {
  row-gap: var(--ctt-core-space-2) !important;
} /* → 8px */
.ctt-gap-y-3 {
  row-gap: var(--ctt-core-space-3) !important;
} /* → 12px */
.ctt-gap-y-4 {
  row-gap: var(--ctt-core-space-4) !important;
} /* → 16px */
.ctt-gap-y-6 {
  row-gap: var(--ctt-core-space-6) !important;
} /* → 24px */
.ctt-gap-y-8 {
  row-gap: var(--ctt-core-space-8) !important;
} /* → 32px */
.ctt-gap-y-10 {
  row-gap: var(--ctt-core-space-10) !important;
} /* → 40px */
.ctt-gap-y-12 {
  row-gap: var(--ctt-core-space-12) !important;
} /* → 48px */
.ctt-gap-y-16 {
  row-gap: var(--ctt-core-space-16) !important;
} /* → 64px */
.ctt-gap-y-20 {
  row-gap: var(--ctt-core-space-20) !important;
} /* → 80px */

/* ==========================================================================
   END OF SPACING UTILITIES
   ========================================================================== */