/* ==========================================================================
  utilities.css
  共用內外距 Utility Classes（對齊 typography.css 的 --space-* tokens）
  ---------------------------------------------------------------------
  命名規則參考 Bootstrap 慣例：{屬性}{方向}-{尺寸}

  屬性：
  m = margin　p = padding

  方向：
  （空白） = 四邊　　t = top　　b = bottom　　l = left　　r = right
  x = 左右兩側（margin-inline / padding-inline）
  y = 上下兩側（margin-block  / padding-block）

  尺寸（對齊 --space-* token，非任意數字，避免切版時尺寸失控）：
  0 / 2xs / xs / sm / md / lg / xl / 2xl / 3xl / 4xl
  （margin 額外支援 auto，用於置中，如 .mx-auto）

  範例：
  <div class="mt-lg mb-md px-sm">...</div>
  <div class="inner-wrap mx-auto">...</div>

  ⚠️ 使用原則：
  - 這組 class 適合「頁面局部微調」（例如某張卡片想跟上面區塊拉開一點距離），
  不是用來取代 .section-spacing 系列（那個是專門處理大區塊上下留白的）。
  - 同一個元素上如果 utility class 跟該元件自己寫的 margin/padding 衝突，
  要看兩邊選擇器優先權與載入順序決定誰生效，混用時請留意。
  ========================================================================== */

/* ---- Margin ---- */

.m-0 {
  margin: 0;
}

.m-2xs {
  margin: var(--space-2xs);
}

.m-xs {
  margin: var(--space-xs);
}

.m-sm {
  margin: var(--space-sm);
}

.m-md {
  margin: var(--space-md);
}

.m-lg {
  margin: var(--space-lg);
}

.m-xl {
  margin: var(--space-xl);
}

.m-2xl {
  margin: var(--space-2xl);
}

.m-auto {
  margin: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-2xs {
  margin-top: var(--space-2xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mt-md {
  margin-top: var(--space-md);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mt-auto {
  margin-top: auto;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2xs {
  margin-bottom: var(--space-2xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.mb-auto {
  margin-bottom: auto;
}

.ml-0 {
  margin-left: 0;
}

.ml-2xs {
  margin-left: var(--space-2xs);
}

.ml-xs {
  margin-left: var(--space-xs);
}

.ml-sm {
  margin-left: var(--space-sm);
}

.ml-md {
  margin-left: var(--space-md);
}

.ml-lg {
  margin-left: var(--space-lg);
}

.ml-xl {
  margin-left: var(--space-xl);
}

.ml-2xl {
  margin-left: var(--space-2xl);
}

.ml-auto {
  margin-left: auto;
}

.mr-0 {
  margin-right: 0;
}

.mr-2xs {
  margin-right: var(--space-2xs);
}

.mr-xs {
  margin-right: var(--space-xs);
}

.mr-sm {
  margin-right: var(--space-sm);
}

.mr-md {
  margin-right: var(--space-md);
}

.mr-lg {
  margin-right: var(--space-lg);
}

.mr-xl {
  margin-right: var(--space-xl);
}

.mr-2xl {
  margin-right: var(--space-2xl);
}

.mr-auto {
  margin-right: auto;
}

.mx-0 {
  margin-inline: 0;
}

.mx-2xs {
  margin-inline: var(--space-2xs);
}

.mx-xs {
  margin-inline: var(--space-xs);
}

.mx-sm {
  margin-inline: var(--space-sm);
}

.mx-md {
  margin-inline: var(--space-md);
}

.mx-lg {
  margin-inline: var(--space-lg);
}

.mx-xl {
  margin-inline: var(--space-xl);
}

.mx-2xl {
  margin-inline: var(--space-2xl);
}

.mx-auto {
  margin-inline: auto;
}

.my-0 {
  margin-block: 0;
}

.my-2xs {
  margin-block: var(--space-2xs);
}

.my-xs {
  margin-block: var(--space-xs);
}

.my-sm {
  margin-block: var(--space-sm);
}

.my-md {
  margin-block: var(--space-md);
}

.my-lg {
  margin-block: var(--space-lg);
}

.my-xl {
  margin-block: var(--space-xl);
}

.my-2xl {
  margin-block: var(--space-2xl);
}

.my-auto {
  margin-block: auto;
}

/* ---- Padding ---- */

.p-0 {
  padding: 0;
}

.p-2xs {
  padding: var(--space-2xs);
}

.p-xs {
  padding: var(--space-xs);
}

.p-sm {
  padding: var(--space-sm);
}

.p-md {
  padding: var(--space-md);
}

.p-lg {
  padding: var(--space-lg);
}

.p-xl {
  padding: var(--space-xl);
}

.p-2xl {
  padding: var(--space-2xl);
}

.pt-0 {
  padding-top: 0;
}

.pt-2xs {
  padding-top: var(--space-2xs);
}

.pt-xs {
  padding-top: var(--space-xs);
}

.pt-sm {
  padding-top: var(--space-sm);
}

.pt-md {
  padding-top: var(--space-md);
}

.pt-lg {
  padding-top: var(--space-lg);
}

.pt-xl {
  padding-top: var(--space-xl);
}

.pt-2xl {
  padding-top: var(--space-2xl);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-2xs {
  padding-bottom: var(--space-2xs);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}

.pb-sm {
  padding-bottom: var(--space-sm);
}

.pb-md {
  padding-bottom: var(--space-md);
}

.pb-lg {
  padding-bottom: var(--space-lg);
}

.pb-xl {
  padding-bottom: var(--space-xl);
}

.pb-2xl {
  padding-bottom: var(--space-2xl);
}

.pl-0 {
  padding-left: 0;
}

.pl-2xs {
  padding-left: var(--space-2xs);
}

.pl-xs {
  padding-left: var(--space-xs);
}

.pl-sm {
  padding-left: var(--space-sm);
}

.pl-md {
  padding-left: var(--space-md);
}

.pl-lg {
  padding-left: var(--space-lg);
}

.pl-xl {
  padding-left: var(--space-xl);
}

.pl-2xl {
  padding-left: var(--space-2xl);
}

.pr-0 {
  padding-right: 0;
}

.pr-2xs {
  padding-right: var(--space-2xs);
}

.pr-xs {
  padding-right: var(--space-xs);
}

.pr-sm {
  padding-right: var(--space-sm);
}

.pr-md {
  padding-right: var(--space-md);
}

.pr-lg {
  padding-right: var(--space-lg);
}

.pr-xl {
  padding-right: var(--space-xl);
}

.pr-2xl {
  padding-right: var(--space-2xl);
}

.px-0 {
  padding-inline: 0;
}

.px-2xs {
  padding-inline: var(--space-2xs);
}

.px-xs {
  padding-inline: var(--space-xs);
}

.px-sm {
  padding-inline: var(--space-sm);
}

.px-md {
  padding-inline: var(--space-md);
}

.px-lg {
  padding-inline: var(--space-lg);
}

.px-xl {
  padding-inline: var(--space-xl);
}

.px-2xl {
  padding-inline: var(--space-2xl);
}

.py-0 {
  padding-block: 0;
}

.py-2xs {
  padding-block: var(--space-2xs);
}

.py-xs {
  padding-block: var(--space-xs);
}

.py-sm {
  padding-block: var(--space-sm);
}

.py-md {
  padding-block: var(--space-md);
}

.py-lg {
  padding-block: var(--space-lg);
}

.py-xl {
  padding-block: var(--space-xl);
}

.py-2xl {
  padding-block: var(--space-2xl);
}

/* ---- Extended spacing: large layout offsets ---- */

.m-3xl {
  margin: var(--space-3xl);
}

.m-4xl {
  margin: var(--space-4xl);
}

.mt-3xl {
  margin-top: var(--space-3xl);
}

.mt-4xl {
  margin-top: var(--space-4xl);
}

.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.mb-4xl {
  margin-bottom: var(--space-4xl);
}

.mx-3xl {
  margin-inline: var(--space-3xl);
}

.mx-4xl {
  margin-inline: var(--space-4xl);
}

.my-3xl {
  margin-block: var(--space-3xl);
}

.my-4xl {
  margin-block: var(--space-4xl);
}

.p-3xl {
  padding: var(--space-3xl);
}

.p-4xl {
  padding: var(--space-4xl);
}

.pt-3xl {
  padding-top: var(--space-3xl);
}

.pt-4xl {
  padding-top: var(--space-4xl);
}

.pb-3xl {
  padding-bottom: var(--space-3xl);
}

.pb-4xl {
  padding-bottom: var(--space-4xl);
}

.px-3xl {
  padding-inline: var(--space-3xl);
}

.px-4xl {
  padding-inline: var(--space-4xl);
}

.py-3xl {
  padding-block: var(--space-3xl);
}

.py-4xl {
  padding-block: var(--space-4xl);
}

/* ---- Responsive spacing: tablet and below (<= 1023px) ---- */

@media (max-width: 1023px) {
  .lg-down-pt-xs {
    padding-top: var(--space-xs);
  }

  .lg-down-mt-sm {
    margin-top: var(--space-sm);
  }
}