/* Skeleton
   A placeholder shown while content loads. Set width and height inline or with
   utility classes. Use data-shape="circle" for avatars and data-shape="text"
   for lines. Colour and motion come from tokens.css. */

.dp-skeleton {
  display: block;
  width: 100%;
  height: 1rem;
  border-radius: var(--dp-radius-sm);
  background: linear-gradient(
    90deg,
    var(--dp-blue-200) 25%,
    var(--dp-blue-100) 37%,
    var(--dp-blue-200) 63%
  );
  background-size: 400% 100%;
  animation: dp-skeleton-shimmer 1.4s ease infinite;
}

.dp-skeleton[data-shape="text"] {
  height: 0.75rem;
  border-radius: var(--dp-radius-xs);
}

.dp-skeleton[data-shape="circle"] {
  border-radius: var(--dp-radius-full);
}

@keyframes dp-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-skeleton { animation: none; }
}