const Tag = ({ children, variant = 'default', className = '', ...props }) => {
  const variants = {
    default: "bg-bg-warm text-fg",
    accent: "bg-accent-soft text-purple-700",
    success: "bg-success text-teal-900",
    dark: "bg-bg-dark text-paper",
  };

  return (
    <span 
      className={`
        inline-flex items-center px-2 py-1 rounded-[var(--r-pill)]
        label whitespace-nowrap
        ${variants[variant]}
        ${className}
      `}
      {...props}
    >
      {children}
    </span>
  );
};

export default Tag;
