/* =====================================================================
   Agenic Spacing Utilities
   ---------------------------------------------------------------------
   Atomic Klassen für Margin, Padding und Gap. Mobile-first responsive.

   Skala — T-Shirt-Sizing aus tokens.css (Schicht 2):
     0     0
     xs    4px
     sm    8px
     md   16px
     lg   24px
     xl   32px
     2xl  48px
     3xl  96px

   Properties (11):
     m   → margin           p   → padding          gap → gap (flex/grid)
     mt  → margin-top       pt  → padding-top
     mb  → margin-bottom    pb  → padding-bottom
     mx  → margin-inline    px  → padding-inline   (logisch, RTL-safe)
     my  → margin-block     py  → padding-block

     mr/ml/pr/pl bewusst weggelassen — mx/px deckt symmetrische Fälle,
     für asymmetrisch über inline-start/end direkt am Widget arbeiten.

   Auto: .ag-m-auto, .ag-mx-auto, .ag-my-auto

   Responsive — Mobile-first min-width (Werte gespiegelt aus --bp-*):
     base   ≥ 0
     --md   ≥ 768px
     --lg   ≥ 1024px

     Syntax: <utility>--<bp>, z. B. .ag-mt-lg--md

   Beispiele:
     <div class="ag-p-md ag-p-lg--md ag-p-xl--lg">
     <div class="ag-mx-auto ag-my-2xl">
     <ul class="ag-gap-sm ag-gap-md--md">

   Konventionen:
     • Nur Schicht-2-Tokens (--space-xs … --space-3xl).
     • Kein !important. Wenn Elementor inline schreibt, am Widget fixen.
     • Utilities laden NACH ui.css (Source-Order > Specificity).
     • Neue Stufen → erst Token in tokens.css Schicht 2, dann hier.
   ===================================================================== */


/* ── Base (immer aktiv) ─────────────────────────────────────────────── */

/* margin – all */
.ag-m-0   { margin: 0; }
.ag-m-xs  { margin: var(--space-xs); }
.ag-m-sm  { margin: var(--space-sm); }
.ag-m-md  { margin: var(--space-md); }
.ag-m-lg  { margin: var(--space-lg); }
.ag-m-xl  { margin: var(--space-xl); }
.ag-m-2xl { margin: var(--space-2xl); }
.ag-m-3xl { margin: var(--space-3xl); }
.ag-m-auto { margin: auto; }

/* margin – inline (x) */
.ag-mx-0   { margin-inline: 0; }
.ag-mx-xs  { margin-inline: var(--space-xs); }
.ag-mx-sm  { margin-inline: var(--space-sm); }
.ag-mx-md  { margin-inline: var(--space-md); }
.ag-mx-lg  { margin-inline: var(--space-lg); }
.ag-mx-xl  { margin-inline: var(--space-xl); }
.ag-mx-2xl { margin-inline: var(--space-2xl); }
.ag-mx-3xl { margin-inline: var(--space-3xl); }
.ag-mx-auto { margin-inline: auto; }

/* margin – block (y) */
.ag-my-0   { margin-block: 0; }
.ag-my-xs  { margin-block: var(--space-xs); }
.ag-my-sm  { margin-block: var(--space-sm); }
.ag-my-md  { margin-block: var(--space-md); }
.ag-my-lg  { margin-block: var(--space-lg); }
.ag-my-xl  { margin-block: var(--space-xl); }
.ag-my-2xl { margin-block: var(--space-2xl); }
.ag-my-3xl { margin-block: var(--space-3xl); }
.ag-my-auto { margin-block: auto; }

/* margin – top */
.ag-mt-0   { margin-top: 0; }
.ag-mt-xs  { margin-top: var(--space-xs); }
.ag-mt-sm  { margin-top: var(--space-sm); }
.ag-mt-md  { margin-top: var(--space-md); }
.ag-mt-lg  { margin-top: var(--space-lg); }
.ag-mt-xl  { margin-top: var(--space-xl); }
.ag-mt-2xl { margin-top: var(--space-2xl); }
.ag-mt-3xl { margin-top: var(--space-3xl); }
.ag-mt-auto { margin-top: auto; }

/* margin – bottom */
.ag-mb-0   { margin-bottom: 0; }
.ag-mb-xs  { margin-bottom: var(--space-xs); }
.ag-mb-sm  { margin-bottom: var(--space-sm); }
.ag-mb-md  { margin-bottom: var(--space-md); }
.ag-mb-lg  { margin-bottom: var(--space-lg); }
.ag-mb-xl  { margin-bottom: var(--space-xl); }
.ag-mb-2xl { margin-bottom: var(--space-2xl); }
.ag-mb-3xl { margin-bottom: var(--space-3xl); }
.ag-mb-auto { margin-bottom: auto; }

/* padding – all */
.ag-p-0   { padding: 0; }
.ag-p-xs  { padding: var(--space-xs); }
.ag-p-sm  { padding: var(--space-sm); }
.ag-p-md  { padding: var(--space-md); }
.ag-p-lg  { padding: var(--space-lg); }
.ag-p-xl  { padding: var(--space-xl); }
.ag-p-2xl { padding: var(--space-2xl); }
.ag-p-3xl { padding: var(--space-3xl); }

/* padding – inline (x) */
.ag-px-0   { padding-inline: 0; }
.ag-px-xs  { padding-inline: var(--space-xs); }
.ag-px-sm  { padding-inline: var(--space-sm); }
.ag-px-md  { padding-inline: var(--space-md); }
.ag-px-lg  { padding-inline: var(--space-lg); }
.ag-px-xl  { padding-inline: var(--space-xl); }
.ag-px-2xl { padding-inline: var(--space-2xl); }
.ag-px-3xl { padding-inline: var(--space-3xl); }

/* padding – block (y) */
.ag-py-0   { padding-block: 0; }
.ag-py-xs  { padding-block: var(--space-xs); }
.ag-py-sm  { padding-block: var(--space-sm); }
.ag-py-md  { padding-block: var(--space-md); }
.ag-py-lg  { padding-block: var(--space-lg); }
.ag-py-xl  { padding-block: var(--space-xl); }
.ag-py-2xl { padding-block: var(--space-2xl); }
.ag-py-3xl { padding-block: var(--space-3xl); }

/* padding – top */
.ag-pt-0   { padding-top: 0; }
.ag-pt-xs  { padding-top: var(--space-xs); }
.ag-pt-sm  { padding-top: var(--space-sm); }
.ag-pt-md  { padding-top: var(--space-md); }
.ag-pt-lg  { padding-top: var(--space-lg); }
.ag-pt-xl  { padding-top: var(--space-xl); }
.ag-pt-2xl { padding-top: var(--space-2xl); }
.ag-pt-3xl { padding-top: var(--space-3xl); }

/* padding – bottom */
.ag-pb-0   { padding-bottom: 0; }
.ag-pb-xs  { padding-bottom: var(--space-xs); }
.ag-pb-sm  { padding-bottom: var(--space-sm); }
.ag-pb-md  { padding-bottom: var(--space-md); }
.ag-pb-lg  { padding-bottom: var(--space-lg); }
.ag-pb-xl  { padding-bottom: var(--space-xl); }
.ag-pb-2xl { padding-bottom: var(--space-2xl); }
.ag-pb-3xl { padding-bottom: var(--space-3xl); }

/* gap (Flex / Grid) */
.ag-gap-0   { gap: 0; }
.ag-gap-xs  { gap: var(--space-xs); }
.ag-gap-sm  { gap: var(--space-sm); }
.ag-gap-md  { gap: var(--space-md); }
.ag-gap-lg  { gap: var(--space-lg); }
.ag-gap-xl  { gap: var(--space-xl); }
.ag-gap-2xl { gap: var(--space-2xl); }
.ag-gap-3xl { gap: var(--space-3xl); }


/* ── md ≥ 768px ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .ag-m-0--md   { margin: 0; }
  .ag-m-xs--md  { margin: var(--space-xs); }
  .ag-m-sm--md  { margin: var(--space-sm); }
  .ag-m-md--md  { margin: var(--space-md); }
  .ag-m-lg--md  { margin: var(--space-lg); }
  .ag-m-xl--md  { margin: var(--space-xl); }
  .ag-m-2xl--md { margin: var(--space-2xl); }
  .ag-m-3xl--md { margin: var(--space-3xl); }
  .ag-m-auto--md { margin: auto; }

  .ag-mx-0--md   { margin-inline: 0; }
  .ag-mx-xs--md  { margin-inline: var(--space-xs); }
  .ag-mx-sm--md  { margin-inline: var(--space-sm); }
  .ag-mx-md--md  { margin-inline: var(--space-md); }
  .ag-mx-lg--md  { margin-inline: var(--space-lg); }
  .ag-mx-xl--md  { margin-inline: var(--space-xl); }
  .ag-mx-2xl--md { margin-inline: var(--space-2xl); }
  .ag-mx-3xl--md { margin-inline: var(--space-3xl); }
  .ag-mx-auto--md { margin-inline: auto; }

  .ag-my-0--md   { margin-block: 0; }
  .ag-my-xs--md  { margin-block: var(--space-xs); }
  .ag-my-sm--md  { margin-block: var(--space-sm); }
  .ag-my-md--md  { margin-block: var(--space-md); }
  .ag-my-lg--md  { margin-block: var(--space-lg); }
  .ag-my-xl--md  { margin-block: var(--space-xl); }
  .ag-my-2xl--md { margin-block: var(--space-2xl); }
  .ag-my-3xl--md { margin-block: var(--space-3xl); }

  .ag-mt-0--md   { margin-top: 0; }
  .ag-mt-xs--md  { margin-top: var(--space-xs); }
  .ag-mt-sm--md  { margin-top: var(--space-sm); }
  .ag-mt-md--md  { margin-top: var(--space-md); }
  .ag-mt-lg--md  { margin-top: var(--space-lg); }
  .ag-mt-xl--md  { margin-top: var(--space-xl); }
  .ag-mt-2xl--md { margin-top: var(--space-2xl); }
  .ag-mt-3xl--md { margin-top: var(--space-3xl); }

  .ag-mb-0--md   { margin-bottom: 0; }
  .ag-mb-xs--md  { margin-bottom: var(--space-xs); }
  .ag-mb-sm--md  { margin-bottom: var(--space-sm); }
  .ag-mb-md--md  { margin-bottom: var(--space-md); }
  .ag-mb-lg--md  { margin-bottom: var(--space-lg); }
  .ag-mb-xl--md  { margin-bottom: var(--space-xl); }
  .ag-mb-2xl--md { margin-bottom: var(--space-2xl); }
  .ag-mb-3xl--md { margin-bottom: var(--space-3xl); }

  .ag-p-0--md   { padding: 0; }
  .ag-p-xs--md  { padding: var(--space-xs); }
  .ag-p-sm--md  { padding: var(--space-sm); }
  .ag-p-md--md  { padding: var(--space-md); }
  .ag-p-lg--md  { padding: var(--space-lg); }
  .ag-p-xl--md  { padding: var(--space-xl); }
  .ag-p-2xl--md { padding: var(--space-2xl); }
  .ag-p-3xl--md { padding: var(--space-3xl); }

  .ag-px-0--md   { padding-inline: 0; }
  .ag-px-xs--md  { padding-inline: var(--space-xs); }
  .ag-px-sm--md  { padding-inline: var(--space-sm); }
  .ag-px-md--md  { padding-inline: var(--space-md); }
  .ag-px-lg--md  { padding-inline: var(--space-lg); }
  .ag-px-xl--md  { padding-inline: var(--space-xl); }
  .ag-px-2xl--md { padding-inline: var(--space-2xl); }
  .ag-px-3xl--md { padding-inline: var(--space-3xl); }

  .ag-py-0--md   { padding-block: 0; }
  .ag-py-xs--md  { padding-block: var(--space-xs); }
  .ag-py-sm--md  { padding-block: var(--space-sm); }
  .ag-py-md--md  { padding-block: var(--space-md); }
  .ag-py-lg--md  { padding-block: var(--space-lg); }
  .ag-py-xl--md  { padding-block: var(--space-xl); }
  .ag-py-2xl--md { padding-block: var(--space-2xl); }
  .ag-py-3xl--md { padding-block: var(--space-3xl); }

  .ag-pt-0--md   { padding-top: 0; }
  .ag-pt-xs--md  { padding-top: var(--space-xs); }
  .ag-pt-sm--md  { padding-top: var(--space-sm); }
  .ag-pt-md--md  { padding-top: var(--space-md); }
  .ag-pt-lg--md  { padding-top: var(--space-lg); }
  .ag-pt-xl--md  { padding-top: var(--space-xl); }
  .ag-pt-2xl--md { padding-top: var(--space-2xl); }
  .ag-pt-3xl--md { padding-top: var(--space-3xl); }

  .ag-pb-0--md   { padding-bottom: 0; }
  .ag-pb-xs--md  { padding-bottom: var(--space-xs); }
  .ag-pb-sm--md  { padding-bottom: var(--space-sm); }
  .ag-pb-md--md  { padding-bottom: var(--space-md); }
  .ag-pb-lg--md  { padding-bottom: var(--space-lg); }
  .ag-pb-xl--md  { padding-bottom: var(--space-xl); }
  .ag-pb-2xl--md { padding-bottom: var(--space-2xl); }
  .ag-pb-3xl--md { padding-bottom: var(--space-3xl); }

  .ag-gap-0--md   { gap: 0; }
  .ag-gap-xs--md  { gap: var(--space-xs); }
  .ag-gap-sm--md  { gap: var(--space-sm); }
  .ag-gap-md--md  { gap: var(--space-md); }
  .ag-gap-lg--md  { gap: var(--space-lg); }
  .ag-gap-xl--md  { gap: var(--space-xl); }
  .ag-gap-2xl--md { gap: var(--space-2xl); }
  .ag-gap-3xl--md { gap: var(--space-3xl); }
}


/* ── lg ≥ 1024px ─────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .ag-m-0--lg   { margin: 0; }
  .ag-m-xs--lg  { margin: var(--space-xs); }
  .ag-m-sm--lg  { margin: var(--space-sm); }
  .ag-m-md--lg  { margin: var(--space-md); }
  .ag-m-lg--lg  { margin: var(--space-lg); }
  .ag-m-xl--lg  { margin: var(--space-xl); }
  .ag-m-2xl--lg { margin: var(--space-2xl); }
  .ag-m-3xl--lg { margin: var(--space-3xl); }
  .ag-m-auto--lg { margin: auto; }

  .ag-mx-0--lg   { margin-inline: 0; }
  .ag-mx-xs--lg  { margin-inline: var(--space-xs); }
  .ag-mx-sm--lg  { margin-inline: var(--space-sm); }
  .ag-mx-md--lg  { margin-inline: var(--space-md); }
  .ag-mx-lg--lg  { margin-inline: var(--space-lg); }
  .ag-mx-xl--lg  { margin-inline: var(--space-xl); }
  .ag-mx-2xl--lg { margin-inline: var(--space-2xl); }
  .ag-mx-3xl--lg { margin-inline: var(--space-3xl); }
  .ag-mx-auto--lg { margin-inline: auto; }

  .ag-my-0--lg   { margin-block: 0; }
  .ag-my-xs--lg  { margin-block: var(--space-xs); }
  .ag-my-sm--lg  { margin-block: var(--space-sm); }
  .ag-my-md--lg  { margin-block: var(--space-md); }
  .ag-my-lg--lg  { margin-block: var(--space-lg); }
  .ag-my-xl--lg  { margin-block: var(--space-xl); }
  .ag-my-2xl--lg { margin-block: var(--space-2xl); }
  .ag-my-3xl--lg { margin-block: var(--space-3xl); }

  .ag-mt-0--lg   { margin-top: 0; }
  .ag-mt-xs--lg  { margin-top: var(--space-xs); }
  .ag-mt-sm--lg  { margin-top: var(--space-sm); }
  .ag-mt-md--lg  { margin-top: var(--space-md); }
  .ag-mt-lg--lg  { margin-top: var(--space-lg); }
  .ag-mt-xl--lg  { margin-top: var(--space-xl); }
  .ag-mt-2xl--lg { margin-top: var(--space-2xl); }
  .ag-mt-3xl--lg { margin-top: var(--space-3xl); }

  .ag-mb-0--lg   { margin-bottom: 0; }
  .ag-mb-xs--lg  { margin-bottom: var(--space-xs); }
  .ag-mb-sm--lg  { margin-bottom: var(--space-sm); }
  .ag-mb-md--lg  { margin-bottom: var(--space-md); }
  .ag-mb-lg--lg  { margin-bottom: var(--space-lg); }
  .ag-mb-xl--lg  { margin-bottom: var(--space-xl); }
  .ag-mb-2xl--lg { margin-bottom: var(--space-2xl); }
  .ag-mb-3xl--lg { margin-bottom: var(--space-3xl); }

  .ag-p-0--lg   { padding: 0; }
  .ag-p-xs--lg  { padding: var(--space-xs); }
  .ag-p-sm--lg  { padding: var(--space-sm); }
  .ag-p-md--lg  { padding: var(--space-md); }
  .ag-p-lg--lg  { padding: var(--space-lg); }
  .ag-p-xl--lg  { padding: var(--space-xl); }
  .ag-p-2xl--lg { padding: var(--space-2xl); }
  .ag-p-3xl--lg { padding: var(--space-3xl); }

  .ag-px-0--lg   { padding-inline: 0; }
  .ag-px-xs--lg  { padding-inline: var(--space-xs); }
  .ag-px-sm--lg  { padding-inline: var(--space-sm); }
  .ag-px-md--lg  { padding-inline: var(--space-md); }
  .ag-px-lg--lg  { padding-inline: var(--space-lg); }
  .ag-px-xl--lg  { padding-inline: var(--space-xl); }
  .ag-px-2xl--lg { padding-inline: var(--space-2xl); }
  .ag-px-3xl--lg { padding-inline: var(--space-3xl); }

  .ag-py-0--lg   { padding-block: 0; }
  .ag-py-xs--lg  { padding-block: var(--space-xs); }
  .ag-py-sm--lg  { padding-block: var(--space-sm); }
  .ag-py-md--lg  { padding-block: var(--space-md); }
  .ag-py-lg--lg  { padding-block: var(--space-lg); }
  .ag-py-xl--lg  { padding-block: var(--space-xl); }
  .ag-py-2xl--lg { padding-block: var(--space-2xl); }
  .ag-py-3xl--lg { padding-block: var(--space-3xl); }

  .ag-pt-0--lg   { padding-top: 0; }
  .ag-pt-xs--lg  { padding-top: var(--space-xs); }
  .ag-pt-sm--lg  { padding-top: var(--space-sm); }
  .ag-pt-md--lg  { padding-top: var(--space-md); }
  .ag-pt-lg--lg  { padding-top: var(--space-lg); }
  .ag-pt-xl--lg  { padding-top: var(--space-xl); }
  .ag-pt-2xl--lg { padding-top: var(--space-2xl); }
  .ag-pt-3xl--lg { padding-top: var(--space-3xl); }

  .ag-pb-0--lg   { padding-bottom: 0; }
  .ag-pb-xs--lg  { padding-bottom: var(--space-xs); }
  .ag-pb-sm--lg  { padding-bottom: var(--space-sm); }
  .ag-pb-md--lg  { padding-bottom: var(--space-md); }
  .ag-pb-lg--lg  { padding-bottom: var(--space-lg); }
  .ag-pb-xl--lg  { padding-bottom: var(--space-xl); }
  .ag-pb-2xl--lg { padding-bottom: var(--space-2xl); }
  .ag-pb-3xl--lg { padding-bottom: var(--space-3xl); }

  .ag-gap-0--lg   { gap: 0; }
  .ag-gap-xs--lg  { gap: var(--space-xs); }
  .ag-gap-sm--lg  { gap: var(--space-sm); }
  .ag-gap-md--lg  { gap: var(--space-md); }
  .ag-gap-lg--lg  { gap: var(--space-lg); }
  .ag-gap-xl--lg  { gap: var(--space-xl); }
  .ag-gap-2xl--lg { gap: var(--space-2xl); }
  .ag-gap-3xl--lg { gap: var(--space-3xl); }
}