const Button = ({ 
  children, 
  variant = 'primary', 
  size = 'md', 
  className = '', 
  ...props 
}) => {
  const baseStyles = "inline-flex items-center justify-center font-bold transition-all focus:outline-none focus:ring-2 focus:ring-offset-2";
  
  const variants = {
    primary: "bg-accent text-paper hover:bg-purple-700 focus:ring-accent",
    secondary: "bg-teal text-paper hover:bg-teal-700 focus:ring-teal",
    outline: "border-2 border-teal text-teal hover:bg-teal hover:text-paper focus:ring-teal",
    ghost: "text-teal hover:bg-bg-warm focus:ring-bg-warm"
  };

  const sizes = {
    sm: "px-3 py-1.5 text-sm rounded-[var(--r-sm)]",
    md: "px-5 py-2.5 text-base rounded-[var(--r-md)]",
    lg: "px-8 py-3.5 text-lg rounded-[var(--r-lg)]",
    pill: "px-6 py-3 text-base rounded-[var(--r-pill)] shadow-pill"
  };

  return (
    <button 
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

export default Button;
