@scope (skeleton-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --skeleton-bg:        var(--a-bg-muted);
    --skeleton-highlight: var(--a-bg-subtle);
    --skeleton-radius:    var(--a-radius-sm);
    --skeleton-duration:  1.5s;
    --skeleton-easing:    var(--a-easing);
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--skeleton-bg);
    border-radius: var(--skeleton-radius);
  }

  /* ── Radius variants ── */
  :scope[radius="none"] { --skeleton-radius: 0; }
  :scope[radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
  :scope[radius="md"]   { --skeleton-radius: var(--a-radius-md); }
  :scope[radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
  :scope[radius="full"] { --skeleton-radius: var(--a-radius-full); }

  /* ── Shimmer animation (default; suppress with [static]) ── */
  :scope:not([static])::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 25%,
      var(--skeleton-highlight) 50%,
      transparent 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer var(--skeleton-duration) var(--skeleton-easing) infinite;
  }

  @keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
}
