/* DS §05.13 — Skeleton / loading (web) · token-only */

@keyframes ds-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.ds-skeleton {
  background: var(--bg3);
  background-image: linear-gradient(
    90deg,
    var(--bg3) 25%,
    var(--bg2) 50%,
    var(--bg3) 75%
  );
  background-size: 800px 100%;
  animation: ds-skeleton-shimmer var(--dur-slow) var(--ease-inout) infinite;
  border-radius: var(--rad-sm);
  display: block;
}

/* Shape variants */
.ds-skeleton-text {
  height: 1em;
  border-radius: var(--rad-xs);
}

.ds-skeleton-text-sm { height: 0.85em; }
.ds-skeleton-text-lg { height: 1.4em; }

.ds-skeleton-heading {
  height: 1.8em;
  border-radius: var(--rad-xs);
}

.ds-skeleton-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.ds-skeleton-avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

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

.ds-skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: var(--btn-radius);
}

/* Width helpers */
.ds-skeleton-w-full   { width: 100%; }
.ds-skeleton-w-3-4    { width: 75%; }
.ds-skeleton-w-1-2    { width: 50%; }
.ds-skeleton-w-1-3    { width: 33%; }

/* Row group */
.ds-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ds-skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}