@scope (block-ui) {
  :where(:scope) {
    --block-padding: var(--a-padding-md);
    --block-margin:  0;
  }

  :scope {
    box-sizing: border-box;
    display: block;
    padding: var(--block-padding);
    margin: var(--block-margin);
  }

  /* ── Padding variants — the parametric --a-padding-{xs..xl} scale
     (foundation/space.css), unified with the global [padding] attribute API
     (api/sizing.css) so <block-ui padding="md"> == [padding="md"] == 24px @k=1,
     and block-ui now tracks the --a-padding-k knob. Was a literal --a-space-N
     scale (md=16px, k-independent) — see CHANGELOG 0.7.7 behavior change. ── */
  :scope[padding="none"] { --block-padding: 0; }
  :scope[padding="xs"]   { --block-padding: var(--a-padding-xs); }
  :scope[padding="sm"]   { --block-padding: var(--a-padding-sm); }
  :scope[padding="md"]   { --block-padding: var(--a-padding-md); }
  :scope[padding="lg"]   { --block-padding: var(--a-padding-lg); }
  :scope[padding="xl"]   { --block-padding: var(--a-padding-xl); }

  /* ── Margin variants — the parametric --a-margin-{xs..xl} scale, unified
     with the global [margin] attribute API (tracks --a-margin-k). ── */
  :scope[margin="none"] { --block-margin: 0; }
  :scope[margin="xs"]   { --block-margin: var(--a-margin-xs); }
  :scope[margin="sm"]   { --block-margin: var(--a-margin-sm); }
  :scope[margin="md"]   { --block-margin: var(--a-margin-md); }
  :scope[margin="lg"]   { --block-margin: var(--a-margin-lg); }
  :scope[margin="xl"]   { --block-margin: var(--a-margin-xl); }
}
