/* =============================================================================
   Utilities: Spacing
   CUBE CSS: Single-responsibility margin and padding utilities.
   Naming: .{property}-{side}-{size} or shorthand .{mt|mb|ml|mr|p|pt|pb}-{size}
   ============================================================================= */

/* Margin top */
.mt-xs  { margin-top: var(--space-xs); }
.mt-s   { margin-top: var(--space-s); }
.mt-m   { margin-top: var(--space-m); }
.mt-l   { margin-top: var(--space-l); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-0   { margin-top: 0; }

/* Margin bottom */
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-s   { margin-bottom: var(--space-s); }
.mb-m   { margin-bottom: var(--space-m); }
.mb-l   { margin-bottom: var(--space-l); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-0   { margin-bottom: 0; }

/* Margin inline (horizontal) */
.mx-auto { margin-inline: auto; }

/* Padding */
.p-s  { padding: var(--space-s); }
.p-m  { padding: var(--space-m); }
.p-l  { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }

/* Padding top */
.pt-s { padding-top: var(--space-s); }
.pt-m { padding-top: var(--space-m); }
.pt-l { padding-top: var(--space-l); }

/* Padding bottom */
.pb-s { padding-bottom: var(--space-s); }
.pb-m { padding-bottom: var(--space-m); }
.pb-l { padding-bottom: var(--space-l); }

/* Surface utilities */
.bg-base    { background-color: var(--color-base); }
.bg-antique { background-color: var(--color-antique); }
.shadow-page { box-shadow: var(--shadow-page); }
.shadow-card { box-shadow: var(--shadow-card); }