:root {
  --section-pad-base: 100px 50px;
  --section-pad-compact: 80px 50px;
  --section-pad-spacious: 150px 50px;
  --section-pad-tight: 0px 50px;
}

.section-pad-base {
  padding: var(--section-pad-base);
}

.section-pad-compact {
  padding: var(--section-pad-compact);
}

.section-pad-spacious {
  padding: var(--section-pad-spacious);
}

.section-pad-tight {
  padding: var(--section-pad-tight);
}

@media (max-width: 1024px) {
  :root {
    --section-pad-base: 80px 30px;
    --section-pad-compact: 60px 30px;
    --section-pad-spacious: 120px 30px;
    --section-pad-tight: 0px 30px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad-base: 60px 20px;
    --section-pad-compact: 50px 20px;
    --section-pad-spacious: 90px 20px;
    --section-pad-tight: 0px 20px;
  }
}

/* ========================================
   TEXT ALIGNMENT UTILITIES
   ======================================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Section-specific alignment patterns */

.section-intro {
  text-align: center;
}

.section-body {
  text-align: left;
}

.section-cta {
  text-align: center;
}

/* Responsive text alignment */

@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center;
  }

  .text-left-mobile {
    text-align: left;
  }

  .section-intro {
    text-align: center;
  }
}