/* Loominost wordmark + mark */

const LoominostMark = ({ size = 28, color = "var(--ink)", accent = "var(--accent)" }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
    {/* Outer ring — a "sun" / luminous disc */}
    <circle cx="16" cy="16" r="14" stroke={color} strokeWidth="1.5" />
    {/* Inner rotated square — the "lumens" */}
    <rect x="10" y="10" width="12" height="12" rx="2" fill={accent} transform="rotate(45 16 16)" />
    {/* Center dot */}
    <circle cx="16" cy="16" r="2.2" fill={color} />
  </svg>
);

const LoominostLogo = ({ size = 22, color = "var(--ink)" }) => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
    <LoominostMark size={size + 6} color={color} />
    <span style={{
      fontFamily: "var(--font-sans)",
      fontSize: size,
      fontWeight: 500,
      letterSpacing: "-0.02em",
      color,
    }}>
      loominost
    </span>
  </div>
);

Object.assign(window, { LoominostMark, LoominostLogo });