// Lymorya logo mark — recreated from brand asset.
// Two overlapping rounded squares: outline L behind, filled square with O front.
function LogoMark({ size = 28, className = "" }) {
  return (
    <svg
      className={`logo-mark ${className}`}
      width={size}
      height={size}
      viewBox="0 0 3000 3000"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Lymorya"
    >
      <rect x="447.5" y="597.88" width="2046.35" height="2046.35" rx="180.03" ry="180.03" fill="currentColor" />
      <path
        d="M1945.02,2454.8H785.68c-59.1,0-107.01-47.91-107.01-107.01V597.88h422.57v1378.08c0,59.1,47.91,107.01,107.01,107.01h736.77c59.1,0,107.01,47.91,107.01,107.01v157.81c0,59.1-47.91,107.01-107.01,107.01ZM678.67,597.88h422.57"
        fill="var(--bg)"
      />
      <path
        d="M1746.1,2454.8c-39.78,0-72.03-32.25-72.03-72.03v-227.77c0-39.78,32.25-72.03,72.03-72.03,0,0,733.67,1.23,733.74,1.24,33.14,7.74.66,369.16,0,369.18-32.5.92-733.74,1.41-733.74,1.41Z"
        fill="var(--bg)"
      />
      <path
        d="M2148.88,1645.51c-70.37,77.6-165.55,116.4-285.56,116.4-60.02,0-114.07-10.35-162.18-31.04-48.11-20.68-89.24-49.13-123.38-85.36-34.14-36.2-60.53-78.62-79.15-127.26-18.62-48.62-27.94-101.39-27.94-158.3s9.31-108.37,27.94-157.52c18.62-49.13,45.01-91.81,79.15-128.04,34.14-36.2,75.27-64.65,123.38-85.36,48.11-20.68,102.16-31.04,162.18-31.04s114.31,10.62,162.96,31.82c48.62,21.22,90.01,49.93,124.16,86.13,34.14,36.23,60.26,78.64,78.37,127.26,18.09,48.65,27.16,100.88,27.16,156.75,0,112.79-35.7,207.96-107.08,285.56ZM2004.96,1183.03c-33.88-44.48-81.09-66.74-141.64-66.74s-109.34,22.26-143.19,66.74c-33.88,44.5-50.8,103.47-50.8,176.92s16.93,132.45,50.8,176.93c33.85,44.5,81.6,66.74,143.19,66.74s109.32-22.75,143.19-68.29c33.85-45.52,50.8-103.98,50.8-175.37s-17.46-132.43-52.35-176.92Z"
        fill="var(--bg)"
      />
      <rect x="2085.4" y="2082.97" width="409.45" height="371.83" fill="var(--bg)" />
    </svg>
  );
}

function LogoWord({ size = 28 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <LogoMark size={size} />
      <span style={{
        fontFamily: '"Mona Sans", sans-serif',
        fontWeight: 600,
        fontSize: 19,
        letterSpacing: "-0.025em",
        color: "var(--text)",
      }}>Lymorya</span>
    </div>
  );
}

Object.assign(window, { LogoMark, LogoWord });