@scope (icon-ui) {
  :where(:scope) {
    --icon-size: var(--a-icon-size, calc(1em + 0.125rem));
  }

  :scope {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    line-height: 0;
  }
  svg {
    width: 100%;
    height: 100%;
  }

  /* ── Named size scale ─────────────────────────────────────────────
     sm/md/lg are also driven by the universal `[size]` token system
     on ancestors (tokens.css §SIZE PRESETS) — these rules let an
     icon-ui set its own size locally. xs / xl / 2xl / 3xl / 4xl
     extend the scale beyond the universal range for hero placeholder
     contexts. `fill` matches the parent box. */
  :scope[size="xs"]   { --icon-size: 0.75rem; }   /* 12px */
  :scope[size="sm"]   { --icon-size: 0.875rem; }  /* 14px */
  :scope[size="md"]   { --icon-size: 1rem; }      /* 16px */
  :scope[size="lg"]   { --icon-size: 1.25rem; }   /* 20px */
  :scope[size="xl"]   { --icon-size: 2rem; }      /* 32px */
  :scope[size="2xl"]  { --icon-size: 3rem; }      /* 48px */
  :scope[size="3xl"]  { --icon-size: 4rem; }      /* 64px */
  :scope[size="4xl"]  { --icon-size: 6rem; }      /* 96px */
  :scope[size="fill"] { --icon-size: 100%; }
}
