/* ════════════════════════════════════════════════════════════════════════
   DS Skeleton primitive (DS sub-step 2 — primitive 11, final)
   Refines the .skeleton-* system IN PLACE (class names unchanged → app-wide
   upgrade, matching all prior in-place primitives). Consumes tokens.css.
   No JS.

   Animation: SHIMMER (gradient sweep, 1.4s ease-in-out) — single canonical
   animation; bespoke .sk-row + sk-pulse keyframe (content/index, home) get
   replaced in migration sub-phase. prefers-reduced-motion handled globally
   in tokens.css (animation-duration → .001ms).

   Shapes:
     .skeleton-line              12px height (text line baseline)
     .skeleton-line-sm           10px height (caption/meta)
     .skeleton-line-lg           16px height (heading)
     .skeleton-avatar            36×36 circle (user avatar placeholder)
     .skeleton-block             rectangular content placeholder; consumer
                                 sets dimensions via inline style or class.

   Width/stagger: consumer-applied via inline style
     (e.g. style="width:88%; animation-delay:.15s")

   A11y: consumer sets aria-busy="true" on the loading container.
   ════════════════════════════════════════════════════════════════════════ */

.skeleton-line,
.skeleton-line-sm,
.skeleton-line-lg,
.skeleton-avatar,
.skeleton-block {
  background: linear-gradient(90deg, var(--cf-surface-hover) 25%, var(--cf-surface-sunken) 50%, var(--cf-surface-hover) 75%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-line     { height: 12px; }
.skeleton-line-sm  { height: 10px; }
.skeleton-line-lg  { height: 16px; }

.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.skeleton-block {
  width: 100%;
  min-height: 80px;
  border-radius: var(--radius-md);
}

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