/* ============================================
   RenDS — Spinner
   ============================================
   Circular loading indicator. CSS-only animation
   that respects prefers-reduced-motion (falls
   back to a gentle opacity pulse instead of
   rotating).

   Usage:
     <span class="ren-spinner" role="status"
           aria-label="Loading"></span>
     <span class="ren-spinner ren-spinner-lg"></span>

   Accessibility:
     - Provide role="status" and aria-label for SR
     - On dark surfaces use .ren-spinner-light
   ============================================ */

.ren-spinner {
  display: inline-block;
  width: var(--ren-spinner-size);
  height: var(--ren-spinner-size);
  border: var(--ren-spinner-width) solid var(--color-fill-active);
  border-top-color: var(--ren-spinner-color);
  border-radius: var(--radius-full);
  animation: ren-spin var(--ren-spinner-speed) var(--ease-loop-smooth) infinite;
}

/* ─── Sizes ─── */
.ren-spinner-xs { width: 0.875rem; height: 0.875rem; border-width: 2px; }
.ren-spinner-sm { width: 1rem;     height: 1rem;     border-width: 2px; }
.ren-spinner-lg { width: 2rem;     height: 2rem;     border-width: 3px; }
.ren-spinner-xl { width: 3rem;     height: 3rem;     border-width: 3px; }

/* ─── Color variants ─── */
.ren-spinner-light {
  border-color: rgb(255, 255, 255, 0.3);
  border-top-color: var(--white);
}

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

@keyframes ren-spin-gentle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Reduced motion: pulse opacity instead of rotating */
@media (prefers-reduced-motion: reduce) {
  .ren-spinner {
    animation: ren-spin-gentle var(--duration-loop-gentle) var(--ease-loop-pulse) infinite;
  }
}