/* ==========================================================================
   Utility classes — text, spacing helpers, visibility
   ========================================================================== */

/* Text */
.text-display { font-family: var(--font-display); }
.text-mono { font-family: var(--font-mono); }

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

.text-muted { color: var(--color-text-muted); }
.text-dim { color: var(--color-text-dim); }
.text-green { color: var(--color-green); }
.text-red { color: var(--color-red-soft); }
.text-gold { color: var(--color-gold); }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.12em; }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

/* Display / visibility */
.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;
}

.hide-mobile { display: initial; }
.show-mobile { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial; }
}

/* Spacing helpers */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }

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

/* Loading placeholder */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-2) 0%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}