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

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

  /* ── Padding variants ── */
  :scope[padding="none"] { --block-padding-default: 0; }
  :scope[padding="xs"]   { --block-padding-default: var(--a-space-1); }
  :scope[padding="sm"]   { --block-padding-default: var(--a-space-2); }
  :scope[padding="md"]   { --block-padding-default: var(--a-space-4); }
  :scope[padding="lg"]   { --block-padding-default: var(--a-space-6); }
  :scope[padding="xl"]   { --block-padding-default: var(--a-space-10); }

  /* ── Margin variants ── */
  :scope[margin="none"] { --block-margin-default: 0; }
  :scope[margin="xs"]   { --block-margin-default: var(--a-space-1); }
  :scope[margin="sm"]   { --block-margin-default: var(--a-space-2); }
  :scope[margin="md"]   { --block-margin-default: var(--a-space-4); }
  :scope[margin="lg"]   { --block-margin-default: var(--a-space-6); }
  :scope[margin="xl"]   { --block-margin-default: var(--a-space-10); }
}
