@scope (mark-ui) {
  :where(:scope) {
    --mark-bg:     var(--a-warning-muted);
    --mark-fg:     var(--a-warning-text);
    --mark-px:     var(--a-space-0-5);
    --mark-radius: var(--a-radius-xs);
  }

  :scope {
    /* Inline so it sits in normal text flow without breaking baselines.
       Padding-inline only — vertical padding would push line-height. */
    display: inline;
    box-sizing: border-box;
    padding-inline: var(--mark-px);
    background: var(--mark-bg);
    color: var(--mark-fg);
    border-radius: var(--mark-radius);
    /* Preserve text decoration from ancestors (e.g. link underlines) */
    text-decoration: inherit;
  }

  /* Variants — same role × state pair as alert-ui / tag-ui */
  :scope[variant="info"] {
    --mark-bg: var(--a-info-muted);
    --mark-fg: var(--a-info-text);
  }
  :scope[variant="success"] {
    --mark-bg: var(--a-success-muted);
    --mark-fg: var(--a-success-text);
  }
  :scope[variant="danger"] {
    --mark-bg: var(--a-danger-muted);
    --mark-fg: var(--a-danger-text);
  }
  :scope[variant="muted"] {
    --mark-bg: var(--a-bg-muted);
    --mark-fg: var(--a-fg);
  }
}
