// Tag.jsx — square print-style chips, pastel tints with readable ink
function Tag({ variant = 'muted', children }) {
  const tagStyles = {
    base: {
      display: 'inline-block',
      padding: '3px 10px',
      fontFamily: 'var(--font-body)',
      fontSize: 11,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      fontWeight: 600,
    },
    orange: { background: 'rgba(242,135,107,0.22)', color: 'var(--ink-coral)' },
    red:    { background: 'rgba(242,135,107,0.22)', color: 'var(--ink-coral)' },
    blue:   { background: 'rgba(127,181,232,0.25)', color: 'var(--ink-sky)' },
    sage:   { background: 'rgba(147,206,143,0.28)', color: 'var(--ink-sage)' },
    lilac:  { background: 'rgba(185,163,227,0.26)', color: 'var(--ink-lilac)' },
    muted:  { background: 'transparent', color: 'var(--c-whisper)', border: '1px solid var(--c-border)' },
  };
  return <span style={{ ...tagStyles.base, ...tagStyles[variant] }}>{children}</span>;
}

window.Tag = Tag;