function Badge({ tone = 'info', children, style: cs }) {
  const tones = {
    new: { bg: '#FBE4D6', fg: '#B85420' },
    success: { bg: '#E0EFE7', fg: '#1E6B47' },
    info: { bg: '#DDE6EE', fg: '#2C4E67' },
    warning: { bg: '#F5E8D0', fg: '#8A5A10' },
    danger: { bg: '#F4DADB', fg: '#8E2C2C' },
    dark: { bg: '#0F1E3D', fg: '#FAFBFC' },
  };
  const t = tones[tone] || tones.info;
  return (
    <span style={{
      fontFamily: 'Inter, system-ui, sans-serif', fontWeight: 600, fontSize: 12, letterSpacing: '0.02em',
      padding: '3px 10px', borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 6,
      lineHeight: 1.4, background: t.bg, color: t.fg, ...cs,
    }}>{children}</span>
  );
}

function TechTag({ children, style: cs }) {
  return (
    <span style={{
      fontFamily: 'JetBrains Mono, monospace', fontSize: 11, padding: '4px 8px', borderRadius: 0,
      border: '1px solid #E6EAF0', background: '#F3F5F8', color: '#3A424D',
      textTransform: 'uppercase', letterSpacing: '0.08em', ...cs,
    }}>{children}</span>
  );
}

Object.assign(window, { Badge, TechTag });