/* ============================================================================
 * Spacing utilities — margin / padding / gap, all on the 4px scale.
 * Naming: wb-{property}{side?}-{step}
 *   m   = margin       p   = padding       gap = gap
 *   x/y = horizontal/vertical, t/r/b/l = sides
 *   step matches --wb-space-{step}
 * ========================================================================== */

/* Margin — all sides */
.wb-m-0  { margin: var(--wb-space-0); }
.wb-m-1  { margin: var(--wb-space-1); }
.wb-m-2  { margin: var(--wb-space-2); }
.wb-m-3  { margin: var(--wb-space-3); }
.wb-m-4  { margin: var(--wb-space-4); }
.wb-m-5  { margin: var(--wb-space-5); }
.wb-m-6  { margin: var(--wb-space-6); }
.wb-m-7  { margin: var(--wb-space-7); }
.wb-m-8  { margin: var(--wb-space-8); }
.wb-m-9  { margin: var(--wb-space-9); }
.wb-m-10 { margin: var(--wb-space-10); }
.wb-m-auto { margin: auto; }

/* Margin — axis */
.wb-mx-0 { margin-inline: var(--wb-space-0); }
.wb-mx-1 { margin-inline: var(--wb-space-1); }
.wb-mx-2 { margin-inline: var(--wb-space-2); }
.wb-mx-3 { margin-inline: var(--wb-space-3); }
.wb-mx-4 { margin-inline: var(--wb-space-4); }
.wb-mx-5 { margin-inline: var(--wb-space-5); }
.wb-mx-6 { margin-inline: var(--wb-space-6); }
.wb-mx-auto { margin-inline: auto; }

.wb-my-0 { margin-block: var(--wb-space-0); }
.wb-my-1 { margin-block: var(--wb-space-1); }
.wb-my-2 { margin-block: var(--wb-space-2); }
.wb-my-3 { margin-block: var(--wb-space-3); }
.wb-my-4 { margin-block: var(--wb-space-4); }
.wb-my-5 { margin-block: var(--wb-space-5); }
.wb-my-6 { margin-block: var(--wb-space-6); }
.wb-my-7 { margin-block: var(--wb-space-7); }
.wb-my-8 { margin-block: var(--wb-space-8); }

/* Margin — single side */
.wb-mt-0 { margin-top: var(--wb-space-0); }
.wb-mt-1 { margin-top: var(--wb-space-1); }
.wb-mt-2 { margin-top: var(--wb-space-2); }
.wb-mt-3 { margin-top: var(--wb-space-3); }
.wb-mt-4 { margin-top: var(--wb-space-4); }
.wb-mt-5 { margin-top: var(--wb-space-5); }
.wb-mt-6 { margin-top: var(--wb-space-6); }
.wb-mt-7 { margin-top: var(--wb-space-7); }
.wb-mt-8 { margin-top: var(--wb-space-8); }

.wb-mb-0 { margin-bottom: var(--wb-space-0); }
.wb-mb-1 { margin-bottom: var(--wb-space-1); }
.wb-mb-2 { margin-bottom: var(--wb-space-2); }
.wb-mb-3 { margin-bottom: var(--wb-space-3); }
.wb-mb-4 { margin-bottom: var(--wb-space-4); }
.wb-mb-5 { margin-bottom: var(--wb-space-5); }
.wb-mb-6 { margin-bottom: var(--wb-space-6); }
.wb-mb-7 { margin-bottom: var(--wb-space-7); }
.wb-mb-8 { margin-bottom: var(--wb-space-8); }

/* Padding — all sides */
.wb-p-0  { padding: var(--wb-space-0); }
.wb-p-1  { padding: var(--wb-space-1); }
.wb-p-2  { padding: var(--wb-space-2); }
.wb-p-3  { padding: var(--wb-space-3); }
.wb-p-4  { padding: var(--wb-space-4); }
.wb-p-5  { padding: var(--wb-space-5); }
.wb-p-6  { padding: var(--wb-space-6); }
.wb-p-7  { padding: var(--wb-space-7); }
.wb-p-8  { padding: var(--wb-space-8); }

/* Padding — axis */
.wb-px-0 { padding-inline: var(--wb-space-0); }
.wb-px-2 { padding-inline: var(--wb-space-2); }
.wb-px-3 { padding-inline: var(--wb-space-3); }
.wb-px-4 { padding-inline: var(--wb-space-4); }
.wb-px-5 { padding-inline: var(--wb-space-5); }
.wb-px-6 { padding-inline: var(--wb-space-6); }

.wb-py-0 { padding-block: var(--wb-space-0); }
.wb-py-2 { padding-block: var(--wb-space-2); }
.wb-py-3 { padding-block: var(--wb-space-3); }
.wb-py-4 { padding-block: var(--wb-space-4); }
.wb-py-5 { padding-block: var(--wb-space-5); }
.wb-py-6 { padding-block: var(--wb-space-6); }
.wb-py-7 { padding-block: var(--wb-space-7); }
.wb-py-8 { padding-block: var(--wb-space-8); }

/* Gap — for flex/grid containers */
.wb-gap-0 { gap: var(--wb-space-0); }
.wb-gap-1 { gap: var(--wb-space-1); }
.wb-gap-2 { gap: var(--wb-space-2); }
.wb-gap-3 { gap: var(--wb-space-3); }
.wb-gap-4 { gap: var(--wb-space-4); }
.wb-gap-5 { gap: var(--wb-space-5); }
.wb-gap-6 { gap: var(--wb-space-6); }
.wb-gap-7 { gap: var(--wb-space-7); }
.wb-gap-8 { gap: var(--wb-space-8); }

/* Stack — vertical rhythm via owl selector */
.wb-stack > * + * { margin-top: var(--wb-space-4); }
.wb-stack-sm > * + * { margin-top: var(--wb-space-2); }
.wb-stack-lg > * + * { margin-top: var(--wb-space-6); }
.wb-stack-xl > * + * { margin-top: var(--wb-space-8); }