const ddCardCss = `
.dd-card {
  background: var(--surface-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
`;

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

export function Card({ padding = 'var(--space-5)', style, children, ...rest }) {
  return <div className="dd-card" style={{ padding, ...style }} {...rest}>{children}</div>;
}