function Button({ variant = 'primary', size = 'md', children, onClick, type, accent }) {
  // accent: optional override — 'violet' (default) or 'teal'
  const baseColor = accent === 'teal' ? 'var(--teal-600)' : 'var(--violet-700)';
  const baseHover = accent === 'teal'
    ? 'color-mix(in oklab, var(--teal-600), white 8%)'
    : 'color-mix(in oklab, var(--violet-700), white 8%)';
  const baseStyle = {
    fontFamily: 'var(--font-body)',
    fontWeight: 600,
    fontSize: size === 'sm' ? 13 : 15,
    padding: size === 'sm' ? '9px 18px' : '14px 26px',
    borderRadius: 9999,
    border: '1px solid transparent',
    cursor: 'pointer',
    transition: 'background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease)',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    textDecoration: 'none',
    whiteSpace: 'nowrap',
    lineHeight: 1,
  };
  const variantStyles = {
    primary:   { background: baseColor, color: 'white' },
    secondary: { background: 'transparent', color: baseColor, borderColor: baseColor },
    ghost:     { background: 'transparent', color: baseColor },
    onDark:    { background: 'white', color: 'var(--violet-700)' },
  };
  const [hover, setHover] = React.useState(false);
  const [pressed, setPressed] = React.useState(false);
  const hoverBg = {
    primary: baseHover,
    secondary: accent === 'teal' ? 'rgba(5,124,139,0.08)' : 'rgba(74,45,111,0.08)',
    ghost: accent === 'teal' ? 'rgba(5,124,139,0.06)' : 'rgba(74,45,111,0.06)',
    onDark: 'rgba(255,255,255,0.92)',
  }[variant];
  const style = {
    ...baseStyle,
    ...variantStyles[variant],
    ...(hover ? { background: hoverBg } : {}),
    ...(pressed ? { transform: 'scale(0.98)' } : {}),
  };
  return (
    <button
      type={type || 'button'}
      style={style}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
    >
      {children}
    </button>
  );
}

window.Button = Button;