const ddBadgeCss = `
.dd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 2px 10px; border-radius: var(--radius-full); line-height: var(--leading-normal);
}
.dd-badge--neutral { background: var(--surface-2); color: var(--text-2); }
.dd-badge--blue    { background: var(--accent-soft); color: var(--accent-text); }
.dd-badge--green   { background: var(--positive-soft); color: var(--positive); }
.dd-badge--orange  { background: var(--warning-soft); color: var(--warning); }
.dd-badge--red     { background: var(--danger-soft); color: var(--danger); }
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-badge-css')) {
  const s = document.createElement('style');
  s.id = 'dd-badge-css';
  s.textContent = ddBadgeCss;
  document.head.appendChild(s);
}

export function Badge({ tone = 'neutral', children, ...rest }) {
  return <span className={`dd-badge dd-badge--${tone}`} {...rest}>{children}</span>;
}