// Divider.jsx — dotted horizontal rule, the brand's signature
function Divider({ color = 'var(--blue)', spacing = 8, dotSize = 1.4, vMargin = 48, solid = false }) {
  if (solid) {
    return (
      <div
        role="separator"
        style={{
          height: 1,
          margin: `${vMargin}px 0`,
          background: color,
        }}
      />
    );
  }
  return (
    <div
      role="separator"
      style={{
        height: 6,
        margin: `${vMargin}px 0`,
        backgroundImage: `radial-gradient(circle, ${color} ${dotSize}px, transparent ${dotSize + 0.2}px)`,
        backgroundSize: `${spacing}px 4px`,
        backgroundPosition: 'center',
        backgroundRepeat: 'repeat-x',
      }}
    />
  );
}
window.Divider = Divider;