/* ==========================================================================
   Utilities — Helper Classes
   Spacing, typography, display, flex, and gap utility classes.
   All values reference CSS custom properties from design-tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------------
   Spacing Helpers
   Scale: 1(4px), 2(8px), 3(12px), 4(16px), 5(20px), 6(24px),
          8(32px), 10(40px), 12(48px)
   ------------------------------------------------------------------ */

/* Margin Top */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

/* Margin Bottom */
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

/* Margin Left */
.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-3  { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); }
.ml-5  { margin-left: var(--space-5); }
.ml-6  { margin-left: var(--space-6); }
.ml-8  { margin-left: var(--space-8); }
.ml-10 { margin-left: var(--space-10); }
.ml-12 { margin-left: var(--space-12); }

/* Margin Right */
.mr-1  { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); }
.mr-3  { margin-right: var(--space-3); }
.mr-4  { margin-right: var(--space-4); }
.mr-5  { margin-right: var(--space-5); }
.mr-6  { margin-right: var(--space-6); }
.mr-8  { margin-right: var(--space-8); }

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

/* Margin X (horizontal) */
.mx-1  { margin-left: var(--space-1);  margin-right: var(--space-1); }
.mx-2  { margin-left: var(--space-2);  margin-right: var(--space-2); }
.mx-3  { margin-left: var(--space-3);  margin-right: var(--space-3); }
.mx-4  { margin-left: var(--space-4);  margin-right: var(--space-4); }
.mx-5  { margin-left: var(--space-5);  margin-right: var(--space-5); }
.mx-6  { margin-left: var(--space-6);  margin-right: var(--space-6); }
.mx-8  { margin-left: var(--space-8);  margin-right: var(--space-8); }
.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (vertical) */
.my-1  { margin-top: var(--space-1);  margin-bottom: var(--space-1); }
.my-2  { margin-top: var(--space-2);  margin-bottom: var(--space-2); }
.my-3  { margin-top: var(--space-3);  margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4);  margin-bottom: var(--space-4); }
.my-5  { margin-top: var(--space-5);  margin-bottom: var(--space-5); }
.my-6  { margin-top: var(--space-6);  margin-bottom: var(--space-6); }
.my-8  { margin-top: var(--space-8);  margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }

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

/* ------------------------------------------------------------------
   Text Helpers
   ------------------------------------------------------------------ */

/* Font Size */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* Font Weight */
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }

/* Text Alignment */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text Color */
.text-muted { color: var(--color-secondary); }

/* ------------------------------------------------------------------
   Display Helpers
   ------------------------------------------------------------------ */
.d-none    { display: none; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-block   { display: block; }
.d-inline  { display: inline; }

/* ------------------------------------------------------------------
   Flex Helpers
   ------------------------------------------------------------------ */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Gap Helpers
   ------------------------------------------------------------------ */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }