// Logo.jsx — Chromatic mark + wordmark.
function ChromaticMark({ size = 22, className = "" }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeLinecap="round" aria-hidden="true">
      <circle cx="16" cy="16" r="13" strokeWidth="1.5" opacity="0.35"/>
      <path d="M27 9.5A13 13 0 1 0 27 22.5" strokeWidth="1.5" opacity="0.7"/>
      <path d="M23 12A8 8 0 1 0 23 20" strokeWidth="2"/>
    </svg>
  );
}

function ChromaticWordmark({ size = 22 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
      <ChromaticMark size={size} />
      <span style={{ fontWeight: 600, letterSpacing: "-0.01em", fontSize: size * 0.7 }}>Chromatic</span>
    </span>
  );
}

window.ChromaticMark = ChromaticMark;
window.ChromaticWordmark = ChromaticWordmark;