const Card = ({ children, className = '', hoverable = false, ...props }) => {
  return (
    <div 
      className={`
        bg-paper rounded-[var(--r-md)] shadow-soft p-6
        ${hoverable ? 'transition-transform hover:-translate-y-1 hover:shadow-pill' : ''}
        ${className}
      `}
      {...props}
    >
      {children}
    </div>
  );
};

export default Card;
