@scope (image-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --image-radius: 0;

    /* ── Colors ── */
    --image-bg:       var(--a-bg-muted);

    /* ── Transition ── */
    --image-duration: var(--a-duration);
    --image-easing:   var(--a-easing);
  }

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

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-block; }

  /* ── Image ── */
  [slot="image"] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--image-duration) var(--image-easing);
  }

  :scope[data-loaded] [slot="image"] {
    opacity: 1;
  }

  /* ── Fit variants ── */
  :scope[fit="cover"]   [slot="image"] { object-fit: cover; }
  :scope[fit="contain"] [slot="image"] { object-fit: contain; }
  :scope[fit="fill"]    [slot="image"] { object-fit: fill; }
  :scope[fit="none"]    [slot="image"] { object-fit: none; }

  /* ── Skeleton placeholder ── */
  [slot="skeleton"] {
    position: absolute;
    inset: 0;
    transition: opacity var(--image-duration) var(--image-easing);
  }

  :scope[data-loaded] [slot="skeleton"] {
    opacity: 0;
    pointer-events: none;
  }

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

  /* ── Size mode — fills the container.
     Layout-changing attribute; sanctioned in component-token-contract.md. */
  :scope[size="full"] {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── Raw — strips chrome (background + radius) for edge-to-edge rendering.
     Comes after radius variants so it overrides them by source order. */
  :scope[raw] {
    --image-bg: transparent;
    --image-radius: 0;
  }
}
