/* ============================================================
   .uk-spinner — proposed canonical loading-spinner subsystem (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the spinner duplicates scattered across legacy CSS:

     .animate-spin  + @keyframes spin       in style.css
     .spinner       + @keyframes spin       in product-news.css   (SVG-arc rotation)
     .ip-latency-spinner + @keyframes ipLatencySpin
                                          in tools.css            (CSS-ring rotation)
     .newsletter-spinner wrapper           in product-news.css   (just inline-flex centring)

   Two render flavours, one timing:
     – `.uk-spinner`           CSS-only ring (border + border-top-color).
                                  Default; needs no inner element.
     – `.uk-spinner-svg`       Animation helper for an inline `<svg>` arc icon.
                                  Mark the svg, no chrome added.

   Composes with: nothing — leaf primitive used inside buttons, forms,
   tool inputs, and inline status rows.

   Default tone is primary. Override the ring colour by setting
   `--spinner-color-rgb` on the spinner element (or any ancestor) — useful
   inside buttons that already carry a brand-coloured surface.
   ============================================================ */

/* ============================================
   Root — CSS ring spinner, primary tone, md size
   ============================================
   The ring uses one rgba ramp (12% base / 100% top) so retoning the
   spinner is one variable assignment — `--spinner-color-rgb`. Default
   resolves to the primary brand colour.
   ============================================ */
.uk-spinner {
    --spinner-size: 20px;
    --spinner-thickness: 2px;
    --spinner-color-rgb: var(--color-primary-rgb);

    display: inline-block;
    width: var(--spinner-size);
    height: var(--spinner-size);
    border: var(--spinner-thickness) solid rgba(var(--spinner-color-rgb), 0.18);
    border-top-color: rgb(var(--spinner-color-rgb));
    border-radius: 50%;
    animation: uk-spinner-rotate 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* ============================================
   Sizes — sm / md (default) / lg
   ============================================ */
.uk-spinner--sm {
    --spinner-size: 14px;
    --spinner-thickness: 2px;
}

.uk-spinner--md {
    --spinner-size: 20px;
    --spinner-thickness: 2px;
}

.uk-spinner--lg {
    --spinner-size: 32px;
    --spinner-thickness: 3px;
}

/* ============================================
   Tones — primary (default) / accent / success / muted / inverse
   ============================================
   Tones flip `--spinner-color-rgb`. `--inverse` is the "on a coloured
   button surface" variant — uses 255,255,255 so the spinner reads on
   primary-accent gradients and dark CTA backgrounds.
   ============================================ */
.uk-spinner--primary { --spinner-color-rgb: var(--color-primary-rgb); }
.uk-spinner--accent  { --spinner-color-rgb: var(--color-accent-rgb); }
.uk-spinner--success { --spinner-color-rgb: var(--color-success-rgb); }
.uk-spinner--muted   { --spinner-color-rgb: 168, 173, 183; }
.uk-spinner--inverse { --spinner-color-rgb: 255, 255, 255; }

/* ============================================
   SVG variant — animation helper for an inline arc icon
   ============================================
   Use on an `<svg>` rendered with currentColor stroke (no extra chrome,
   no border ring). Picks up the surrounding text colour; consumer owns
   the icon shape.
   ============================================ */
.uk-spinner-svg {
    animation: uk-spinner-rotate 0.8s linear infinite;
    transform-origin: center;
}

/* ============================================
   Reduced-motion fallback
   ============================================
   Slows the rotation rather than freezing it — the spinner is a load
   indicator; freezing would break its meaning.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .uk-spinner,
    .uk-spinner-svg {
        animation-duration: 2.4s;
    }
}