/**
 * Margin utility classes — Bootstrap-style naming (mt-0, mx-2, m-auto…),
 * this theme's own spacing scale as values.
 *
 * Meant for the "Extra CSS class(es)" field in a block's Advanced panel, so
 * an editor can nudge a block's spacing without opening the stylesheet. The
 * step numbers mirror Bootstrap: 0 is zero, 1 through 5 climb the theme's
 * own --space-xs … --space-xl tokens — the same values every card, section
 * and pattern on the site already uses, so a class here never introduces a
 * spacing value nothing else on the page uses.
 *
 * !important is deliberate: a utility class exists to override, and without
 * it a more specific component rule (say, a pattern's own h2 margin) would
 * silently win and the class would appear to do nothing.
 */

:root {
  --u-space-0: 0px;
  --u-space-1: var(--space-xs, 4px);
  --u-space-2: var(--space-sm, 8px);
  --u-space-3: var(--space-md, 16px);
  --u-space-4: var(--space-lg, 24px);
  --u-space-5: var(--space-xl, 32px);
}

/* All sides */
.m-0 { margin: var(--u-space-0) !important; }
.m-1 { margin: var(--u-space-1) !important; }
.m-2 { margin: var(--u-space-2) !important; }
.m-3 { margin: var(--u-space-3) !important; }
.m-4 { margin: var(--u-space-4) !important; }
.m-5 { margin: var(--u-space-5) !important; }
.m-auto { margin: auto !important; }

/* Top */
.mt-0 { margin-top: var(--u-space-0) !important; }
.mt-1 { margin-top: var(--u-space-1) !important; }
.mt-2 { margin-top: var(--u-space-2) !important; }
.mt-3 { margin-top: var(--u-space-3) !important; }
.mt-4 { margin-top: var(--u-space-4) !important; }
.mt-5 { margin-top: var(--u-space-5) !important; }
.mt-auto { margin-top: auto !important; }

/* Bottom */
.mb-0 { margin-bottom: var(--u-space-0) !important; }
.mb-1 { margin-bottom: var(--u-space-1) !important; }
.mb-2 { margin-bottom: var(--u-space-2) !important; }
.mb-3 { margin-bottom: var(--u-space-3) !important; }
.mb-4 { margin-bottom: var(--u-space-4) !important; }
.mb-5 { margin-bottom: var(--u-space-5) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Start / end (logical — the same rule works if the site ever gets a
   right-to-left translation, unlike a fixed left/right). */
.ms-0 { margin-inline-start: var(--u-space-0) !important; }
.ms-1 { margin-inline-start: var(--u-space-1) !important; }
.ms-2 { margin-inline-start: var(--u-space-2) !important; }
.ms-3 { margin-inline-start: var(--u-space-3) !important; }
.ms-4 { margin-inline-start: var(--u-space-4) !important; }
.ms-5 { margin-inline-start: var(--u-space-5) !important; }
.ms-auto { margin-inline-start: auto !important; }

.me-0 { margin-inline-end: var(--u-space-0) !important; }
.me-1 { margin-inline-end: var(--u-space-1) !important; }
.me-2 { margin-inline-end: var(--u-space-2) !important; }
.me-3 { margin-inline-end: var(--u-space-3) !important; }
.me-4 { margin-inline-end: var(--u-space-4) !important; }
.me-5 { margin-inline-end: var(--u-space-5) !important; }
.me-auto { margin-inline-end: auto !important; }

/* Horizontal / vertical pairs */
.mx-0 { margin-inline: var(--u-space-0) !important; }
.mx-1 { margin-inline: var(--u-space-1) !important; }
.mx-2 { margin-inline: var(--u-space-2) !important; }
.mx-3 { margin-inline: var(--u-space-3) !important; }
.mx-4 { margin-inline: var(--u-space-4) !important; }
.mx-5 { margin-inline: var(--u-space-5) !important; }
.mx-auto { margin-inline: auto !important; }

.my-0 { margin-block: var(--u-space-0) !important; }
.my-1 { margin-block: var(--u-space-1) !important; }
.my-2 { margin-block: var(--u-space-2) !important; }
.my-3 { margin-block: var(--u-space-3) !important; }
.my-4 { margin-block: var(--u-space-4) !important; }
.my-5 { margin-block: var(--u-space-5) !important; }
.my-auto { margin-block: auto !important; }