/**
 * ============================================================
 *  Loading & Skeleton Styles
 * ============================================================
 */

.skeleton {
  background: var(--color-bg-tertiary);
  border-radius: var(--border-radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(245, 158, 11, 0.04) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 100%
  );
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton__text {
  height: 14px;
  margin-bottom: var(--space-2);
}

.skeleton__text--lg {
  height: 20px;
  width: 60%;
}

.skeleton__text--sm {
  height: 10px;
  width: 80%;
}

.skeleton__circle {
  border-radius: var(--border-radius-full);
}

.skeleton__card {
  height: 180px;
  border-radius: var(--border-radius-lg);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: var(--border-radius-full);
  animation: spin 0.6s linear infinite;
}

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