/* LoadingSpinner module
   Uses design tokens (theme/tokens.css) for the brand gradient. */

.vps-spinner-host {
    position: absolute;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-overlay);
    border-radius: inherit;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.vps-spinner-host.vps-spinner-fullpage {
    position: fixed;
    border-radius: 0;
}

.vps-spinner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
}

.vps-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(226, 232, 240, 0.15);
    border-top-color: var(--color-secondary);
    border-right-color: var(--color-tertiary);
    border-radius: 50%;
    animation: vps-spinner-rotate 0.9s linear infinite;
}

.vps-spinner-label {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

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

@media (prefers-reduced-motion: reduce) {
    .vps-spinner {
        animation-duration: 1.8s;
    }
}