/* ============================================
   Utility Classes
   ============================================ */

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

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

/* --- Font Families --- */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-chinese { font-family: var(--font-chinese); }

/* --- Display --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Spacing --- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* --- Max Width for Centered Text --- */
.measure { max-width: 68ch; }
.measure--narrow { max-width: 48ch; }
.measure--wide { max-width: 85ch; }
.mx-auto { margin-inline: auto; }

/* --- Section Labels (small uppercase) --- */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.label--accent {
  color: var(--vermillion);
}