/**
 * DH Suite — Utility Classes
 *
 * Spacing, visibility, text alignment, and accessibility helpers.
 * Uses design-tokens.css spacing scale consistently.
 *
 * NOTE: Text color utilities (.text-primary, .text-muted, .bg-*),
 * responsive visibility (.mobile-only, .desktop-only), heading classes,
 * and focus indicators live in design-tokens.css — not duplicated here.
 *
 * Consolidates utility classes from:
 *   - reach/static/css/main.css
 *   - respond/static/css/main.css
 *   - rally/static/css/main.css
 */

@layer utilities {

/* ==========================================================================
   Spacing — Margin
   ========================================================================== */

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

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

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

/* --- Margin Y-axis ------------------------------------------------------ */

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }

/* --- Margin X-axis ------------------------------------------------------ */

.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Spacing — Padding
   ========================================================================== */

.p-0 { padding: 0; }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }

.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

/* ==========================================================================
   Text Alignment
   ========================================================================== */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ==========================================================================
   Text Style
   ========================================================================== */

.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.font-normal   { font-weight: 400; }

.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-nowrap { white-space: nowrap; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Visibility
   ========================================================================== */

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/**
 * Screen-reader only: visually hidden but available to assistive technology.
 * Use .sr-only-focusable to make it visible when focused (e.g., skip links).
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   Overflow
   ========================================================================== */

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ==========================================================================
   Width
   ========================================================================== */

.w-full { width: 100%; }

/* ==========================================================================
   Cursor
   ========================================================================== */

.cursor-pointer { cursor: pointer; }

} /* end @layer utilities */