/* Spinner - mono "LOADING..." text with opacity pulse. No SVG spinner.
   Per design-system §5.18 - the system prefers typography over motion. */

.spinner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  animation: spinner-pulse 1.2s var(--ease-default) infinite;
}

.spinner::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

@keyframes spinner-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}