/*
 * assets/css/utilities.css
 * Single-purpose utility classes for common adjustments.
 * Do not duplicate rules that belong in components.css.
 * Keep this file small — only add utilities with clear, broad reuse.
 */

/* ===== Accessibility ===== */
.u-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;
}

/* ===== Text color ===== */
.u-text-primary   { color: var(--color-text-primary); }
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-muted     { color: var(--color-text-muted); }
.u-text-gold      { color: var(--color-gold); }

/* ===== Text size ===== */
.u-text-xs   { font-size: var(--text-xs); }
.u-text-sm   { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }

/* ===== Font weight ===== */
.u-font-medium   { font-weight: var(--weight-medium); }
.u-font-semibold { font-weight: var(--weight-semibold); }
.u-font-bold     { font-weight: var(--weight-bold); }

/* ===== Letter spacing ===== */
.u-tracking-wide    { letter-spacing: var(--tracking-wide); }
.u-tracking-wider   { letter-spacing: var(--tracking-wider); }
.u-tracking-widest  { letter-spacing: var(--tracking-widest); }

/* ===== Spacing ===== */
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }

/* ===== Flex helpers ===== */
.u-flex         { display: flex; }
.u-flex-wrap    { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-gap-2        { gap: var(--space-2); }
.u-gap-3        { gap: var(--space-3); }
.u-gap-4        { gap: var(--space-4); }