/* ===================================
   Skeleton Loading States
   =================================== */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-secondary) 25%,
        var(--bg-hover) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton-text-sm {
    height: 0.75em;
    width: 60%;
}

.skeleton-heading {
    height: 1.5em;
    width: 40%;
    margin-bottom: var(--space-4);
}

.skeleton-card {
    height: 120px;
    margin-bottom: var(--space-4);
}

.skeleton-stat {
    height: 80px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}