const ddInputCss = `
.dd-input {
  display: block; width: 100%; box-sizing: border-box;
  height: var(--control-md); padding: 0 12px;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-1);
  background: var(--surface-card); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dd-input::placeholder { color: var(--text-3); }
.dd-input:hover { border-color: var(--gray-400); }
.dd-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.dd-input[disabled] { opacity: 0.45; pointer-events: none; }
.dd-input--lg { height: var(--control-lg); font-size: var(--text-md); border-radius: var(--radius-sm); }
`;

if (typeof document !== 'undefined' && !document.getElementById('dd-input-css')) {
  const s = document.createElement('style');
  s.id = 'dd-input-css';
  s.textContent = ddInputCss;
  document.head.appendChild(s);
}

export function Input({ size = 'md', style, ...rest }) {
  return <input className={`dd-input${size === 'lg' ? ' dd-input--lg' : ''}`} style={style} {...rest} />;
}