@layer components {

  /* ── Base ─────────────────────────────────────────────────────────── */

  .spinner {
    display: inline-block;
    width: var(--space-8);
    height: var(--space-8);
    border: 2px solid var(--color-border-default);
    border-top-color: var(--color-accent-base);
    border-radius: 50%;
    animation: spinner-rotate 0.6s linear infinite;
    flex-shrink: 0;
  }

  /* ── Small ────────────────────────────────────────────────────────── */

  .spinner-sm {
    width: var(--space-4);
    height: var(--space-4);
    border-width: 1.5px;
  }

  /* ── Rotation animation ──────────────────────────────────────────── */

  @keyframes spinner-rotate {
    to { transform: rotate(360deg); }
  }

  /* ── Reduced-motion pulse ────────────────────────────────────────── */

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

  @media (prefers-reduced-motion: reduce) {
    .spinner {
      animation: spinner-pulse 1s ease-in-out infinite;
    }
  }
}