.skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 14px;
  margin-bottom: var(--space-2);
  width: 100%;
}

.skeleton--text:last-child {
  width: 60%;
}

.skeleton--title {
  height: 24px;
  width: 40%;
  margin-bottom: var(--space-4);
}

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

.skeleton--card {
  height: 120px;
  border-radius: var(--radius-lg);
}

.skeleton--table-row {
  height: 48px;
  margin-bottom: 1px;
}

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