/* ===== SPACING UTILITIES =====
   Prefix: m/p + t|b|y|x + - + xs|s|m|l|xl|xxl
   Examples: mt-s, pb-xl, py-m, mx-xs
   Values from --space-* in variables.css / theme.json
================================ */

.mt-xs { margin-top: var(--space-xs) !important; }
.mt-s  { margin-top: var(--space-s) !important; }
.mt-m  { margin-top: var(--space-m) !important; }
.mt-l  { margin-top: var(--space-l) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-xxl { margin-top: var(--space-xxl) !important; }

.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-s  { margin-bottom: var(--space-s) !important; }
.mb-m  { margin-bottom: var(--space-m) !important; }
.mb-l  { margin-bottom: var(--space-l) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-xxl { margin-bottom: var(--space-xxl) !important; }

.my-xs { margin-block: var(--space-xs) !important; }
.my-s  { margin-block: var(--space-s) !important; }
.my-m  { margin-block: var(--space-m) !important; }
.my-l  { margin-block: var(--space-l) !important; }
.my-xl { margin-block: var(--space-xl) !important; }
.my-xxl { margin-block: var(--space-xxl) !important; }

.mx-xs { margin-inline: var(--space-xs) !important; }
.mx-s  { margin-inline: var(--space-s) !important; }
.mx-m  { margin-inline: var(--space-m) !important; }
.mx-l  { margin-inline: var(--space-l) !important; }
.mx-xl { margin-inline: var(--space-xl) !important; }
.mx-xxl { margin-inline: var(--space-xxl) !important; }

.pt-xs { padding-top: var(--space-xs) !important; }
.pt-s  { padding-top: var(--space-s) !important; }
.pt-m  { padding-top: var(--space-m) !important; }
.pt-l  { padding-top: var(--space-l) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pt-xxl { padding-top: var(--space-xxl) !important; }

.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-s  { padding-bottom: var(--space-s) !important; }
.pb-m  { padding-bottom: var(--space-m) !important; }
.pb-l  { padding-bottom: var(--space-l) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }
.pb-xxl { padding-bottom: var(--space-xxl) !important; }

.py-xs { padding-block: var(--space-xs) !important; }
.py-s  { padding-block: var(--space-s) !important; }
.py-m  { padding-block: var(--space-m) !important; }
.py-l  { padding-block: var(--space-l) !important; }
.py-xl { padding-block: var(--space-xl) !important; }
.py-xxl { padding-block: var(--space-xxl) !important; }

.px-xs { padding-inline: var(--space-xs) !important; }
.px-s  { padding-inline: var(--space-s) !important; }
.px-m  { padding-inline: var(--space-m) !important; }
.px-l  { padding-inline: var(--space-l) !important; }
.px-xl { padding-inline: var(--space-xl) !important; }
.px-xxl { padding-inline: var(--space-xxl) !important; }

/* ===== FONT SIZE UTILITIES (.text-*) =====
   Same steps as Gutenberg Font size (XS–XXL)
=========================================== */

.text-xs  { font-size: var(--text-xs) !important; }
.text-s   { font-size: var(--text-s) !important; }
.text-m   { font-size: var(--text-m) !important; }
.text-l   { font-size: var(--text-l) !important; }
.text-xl  { font-size: var(--text-xl) !important; }
.text-xxl { font-size: var(--text-xxl) !important; }

/* Font family helpers */
.font-title { font-family: var(--font-title) !important; }
.font-body  { font-family: var(--font-body) !important; }

/* Heading helpers (same scale as theme.json elements h1–h4) */
.h1,
.has-h1-font-size {
  font-family: var(--font-title) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
}

.h2,
.has-h2-font-size {
  font-family: var(--font-title) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.h3,
.has-h3-font-size {
  font-family: var(--font-title) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.h4,
.has-h4-font-size {
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}