/* ==========================================================================
   Utilities — Small helper classes used across pages
   Depends on: tokens.css
   Loaded last in the CSS stack for specificity.

   Load order: 5 of 5 (tokens → base → layout → components → utilities)
   ========================================================================== */

/* -----------------------------------------------------------------------
   Text alignment
   ----------------------------------------------------------------------- */

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

/* -----------------------------------------------------------------------
   Text color
   ----------------------------------------------------------------------- */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-inverse   { color: var(--text-on-dark); }
.text-cyan      { color: var(--color-brand-cyan-500); }

/* -----------------------------------------------------------------------
   Font utilities
   ----------------------------------------------------------------------- */

.font-heading   { font-family: var(--font-heading); }
.font-body      { font-family: var(--font-body); }
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium  { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold    { font-weight: var(--weight-bold); }

/* -----------------------------------------------------------------------
   Spacing — margin-top
   ----------------------------------------------------------------------- */

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* -----------------------------------------------------------------------
   Spacing — margin-bottom
   ----------------------------------------------------------------------- */

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* -----------------------------------------------------------------------
   Display
   ----------------------------------------------------------------------- */

.hidden { display: none; }
.block  { display: block; }

/* -----------------------------------------------------------------------
   Responsive visibility
   ----------------------------------------------------------------------- */

@media (max-width: 47.999rem) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 48rem) {
  .hide-desktop { display: none !important; }
}

/* -----------------------------------------------------------------------
   Width constraints
   ----------------------------------------------------------------------- */

.w-full     { width: 100%; }
.max-w-prose { max-width: 65ch; }