@layer components {

  /* ── Base ─────────────────────────────────────────────────────────── */

  .skeleton {
    background-color: var(--color-surface-tertiary);
    border-radius: 0;
    animation: skeleton-pulse 1.5s linear infinite;
  }

  /* ── Text line ────────────────────────────────────────────────────── */

  .skeleton-text {
    height: calc(var(--text-base) * var(--leading-normal));
    width: 80%;
  }

  /* ── Heading ──────────────────────────────────────────────────────── */

  .skeleton-heading {
    height: calc(var(--text-lg) * var(--leading-tight));
    width: 60%;
  }

  /* ── Circle (avatar / icon) ───────────────────────────────────────── */

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

  /* ── Pulse animation ──────────────────────────────────────────────── */

  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* ── Reduced motion ───────────────────────────────────────────────── */

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