/* GuardSync - Skeleton Loading System (Lightweight) */

:root {
    --skeleton-base-light: #f3f4f6;
    --skeleton-shine-light: #e5e7eb;
    --skeleton-base-dark: #1e293b;
    --skeleton-shine-dark: #334155;
}

/* === ANIMATION === */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Alias pour compatibilité */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* === BASE SKELETON === */
.skeleton-line {
    height: 0.75rem;
    background: linear-gradient(
        90deg,
        var(--skeleton-base-light) 0%,
        var(--skeleton-shine-light) 50%,
        var(--skeleton-base-light) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.skeleton-line-lg {
    height: 1rem;
}

.skeleton-line-sm {
    height: 0.5rem;
}

.skeleton-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        var(--skeleton-base-light) 0%,
        var(--skeleton-shine-light) 50%,
        var(--skeleton-base-light) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

/* === DARK MODE === */
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-circle {
    background: linear-gradient(
        90deg,
        var(--skeleton-base-dark) 0%,
        var(--skeleton-shine-dark) 50%,
        var(--skeleton-base-dark) 100%
    );
    background-size: 200% 100%;
}

/* === SPINNER (minimal) === */
.spinner-sm {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

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

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-circle,
    .spinner-sm {
        animation: none;
        background: var(--skeleton-base-light);
    }

    [data-theme="dark"] .skeleton-line,
    [data-theme="dark"] .skeleton-circle {
        background: var(--skeleton-base-dark);
    }
}

/* === PRINT === */
@media print {
    .skeleton-line,
    .skeleton-circle,
    .spinner-sm {
        display: none !important;
    }
}