/* ============================================================================
   GLOBAL SPACING SYSTEM
   Fluid, responsive spacing using six-point scale via clamp()
   Replaces all random hard-coded values with consistent rhythm
   ============================================================================ */

/* ============================================================================
   MARGIN UTILITIES - Consistent spacing between elements
   ============================================================================ */

.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }

.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }

.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.ml-6 { margin-left: var(--space-6) !important; }

.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr-6 { margin-right: var(--space-6) !important; }

.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }

.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }

/* ============================================================================
   PADDING UTILITIES - Internal spacing within elements
   ============================================================================ */

.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }

.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }

.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }

.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-5 { padding-left: var(--space-5) !important; }
.pl-6 { padding-left: var(--space-6) !important; }

.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-5 { padding-right: var(--space-5) !important; }
.pr-6 { padding-right: var(--space-6) !important; }

.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }

.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* ============================================================================
   GAP UTILITIES - Spacing between flex/grid items
   ============================================================================ */

.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }

.gap-x-1 { column-gap: var(--space-1) !important; }
.gap-x-2 { column-gap: var(--space-2) !important; }
.gap-x-3 { column-gap: var(--space-3) !important; }
.gap-x-4 { column-gap: var(--space-4) !important; }
.gap-x-5 { column-gap: var(--space-5) !important; }
.gap-x-6 { column-gap: var(--space-6) !important; }

.gap-y-1 { row-gap: var(--space-1) !important; }
.gap-y-2 { row-gap: var(--space-2) !important; }
.gap-y-3 { row-gap: var(--space-3) !important; }
.gap-y-4 { row-gap: var(--space-4) !important; }
.gap-y-5 { row-gap: var(--space-5) !important; }
.gap-y-6 { row-gap: var(--space-6) !important; }

/* ============================================================================
   SECTION SPACING PATTERNS
   Predefined spacing for common layout scenarios
   ============================================================================ */

/* Section Padding */
.section-p { padding: var(--space-5) var(--space-4); }
.section-pt { padding-top: var(--space-6); }
.section-pb { padding-bottom: var(--space-6); }
.section-py { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.section-px { padding-left: var(--space-4); padding-right: var(--space-4); }

/* Section Margin */
.section-spacing { margin-top: var(--space-6); margin-bottom: var(--space-6); }

/* Content Container Padding */
.content-pad { padding: var(--space-4) var(--space-3); }

/* Card/Component Padding */
.card-pad { padding: var(--space-4); }
.card-pad-sm { padding: var(--space-3); }
.card-pad-lg { padding: var(--space-5); }

/* Grid Gaps */
.grid-gap { gap: var(--space-4); }
.grid-gap-sm { gap: var(--space-2); }
.grid-gap-lg { gap: var(--space-5); }

/* Column Gaps (Flex Rows) */
.flex-gap { gap: var(--space-3); }
.flex-gap-sm { gap: var(--space-2); }
.flex-gap-lg { gap: var(--space-4); }

/* ============================================================================
   READING RHYTHM PATTERNS
   Specific spacing for content blocks and elements
   ============================================================================ */

/* Paragraph Spacing */
.reading-text p {
  margin-bottom: var(--para-space-lg);
}

.reading-text p:last-child {
  margin-bottom: 0;
}

/* Heading with following content */
.with-lead h1 + .lead,
.with-lead h2 + .lead,
.with-lead h3 + .lead {
  margin-top: var(--para-space-sm);
}

/* List spacing within content */
.reading-text ul,
.reading-text ol {
  margin-top: var(--para-space-md);
  margin-bottom: var(--para-space-lg);
}

/* Blockquote spacing */
.reading-text blockquote {
  margin-top: var(--para-space-lg);
  margin-bottom: var(--para-space-lg);
}

/* Metadata spacing in content */
.reading-text .meta-sm,
.reading-text .meta-xs {
  margin-top: var(--para-space-md);
  margin-bottom: var(--para-space-sm);
}

/* ============================================================================
   NEGATIVE MARGINS - Compact spacing helpers
   ============================================================================ */

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

.-mb-1 { margin-bottom: calc(var(--space-1) * -1) !important; }
.-mb-2 { margin-bottom: calc(var(--space-2) * -1) !important; }
.-mb-3 { margin-bottom: calc(var(--space-3) * -1) !important; }
.-mb-4 { margin-bottom: calc(var(--space-4) * -1) !important; }
.-mb-5 { margin-bottom: calc(var(--space-5) * -1) !important; }
.-mb-6 { margin-bottom: calc(var(--space-6) * -1) !important; }

/* ============================================================================
   NO SPACING - Reset/Remove utilities
   ============================================================================ */

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.gap-0 { gap: 0 !important; }

/* ============================================================================
   RESPONSIVE SPACING - Mobile-first adjustments
   ============================================================================ */

@media (max-width: 768px) {
  .section-p { padding: var(--space-4) var(--space-3); }
  .section-pt { padding-top: var(--space-5); }
  .section-pb { padding-bottom: var(--space-5); }
  .section-py { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .section-px { padding-left: var(--space-3); padding-right: var(--space-3); }
  
  .content-pad { padding: var(--space-3) var(--space-2); }
  .card-pad { padding: var(--space-3); }
  .card-pad-lg { padding: var(--space-4); }
  
  .grid-gap { gap: var(--space-3); }
  .grid-gap-lg { gap: var(--space-4); }
  
  .flex-gap { gap: var(--space-2); }
  .flex-gap-lg { gap: var(--space-3); }
}

@media (max-width: 480px) {
  .section-p { padding: var(--space-3) var(--space-2); }
  .section-pt { padding-top: var(--space-4); }
  .section-pb { padding-bottom: var(--space-4); }
  .section-py { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .section-px { padding-left: var(--space-2); padding-right: var(--space-2); }
  
  .content-pad { padding: var(--space-2) var(--space-1); }
  .card-pad { padding: var(--space-2); }
  .card-pad-lg { padding: var(--space-3); }
  
  .grid-gap { gap: var(--space-2); }
  .flex-gap { gap: var(--space-1); }
}