/* tenant/ops_ -- design tokens: palettes, type scale, Lockup mark.
   Single source of truth for colors and typography used by site-chrome,
   site-mocks, and site-home. Dark palette only (canonical per CD guide). */

const MK_PALETTES = {
  dark: {
    bg: "#0F1419", bgPanel: "#161B22", bgRaised: "#1C232C", bgSubtle: "#1A2028",
    border: "#2A3340", borderStrong: "#3A4656",
    fg: "#E5E9EE", fgDim: "#B6BFCC", fgMuted: "#8A96A6", fgFaint: "#5B6878",
    accent: "#C2A882", accentDeep: "#A8906E", accentInk: "#1E1A16", accentBg: "#26201A",
    ok: "#7DC383", okBg: "#1A2820", warn: "#E0B060", warnBg: "#2A2218",
    err: "#D27B6E", errBg: "#2A1C18",
  },
};

const MK_TYPE = {
  mono: "'IBM Plex Mono', ui-monospace, monospace",
  sans: "'IBM Plex Sans', system-ui, sans-serif",
};

/* Lockup: brand mark + wordmark, sized by the `size` prop (font-size in px).
   Uses IBM Plex Mono (already loaded from Google Fonts). */
function Lockup({ pal, size = 17, blink = false }) {
  const markSize = Math.round(size * 1.65);
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: Math.round(size * 0.5), userSelect: "none" }}>
      <svg width={markSize} height={markSize} viewBox="0 0 23 24" fill="none" aria-hidden="true">
        <line x1="9.2" y1="3.6" x2="1.6" y2="20.4" stroke={pal.fg} strokeWidth="2.8" strokeLinecap="round" />
        <line x1="10.8" y1="20.4" x2="21.4" y2="20.4" stroke={pal.accent} strokeWidth="2.8" strokeLinecap="round" />
      </svg>
      <span style={{ fontFamily: MK_TYPE.mono, fontSize: size, fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1 }}>
        <span style={{ color: pal.fg }}>tenant</span>
        <span style={{ color: pal.accent }}>/</span>
        <span style={{ color: pal.fg }}>ops</span>
        {blink
          ? <span style={{ color: pal.accent }} className="ops-caret">_</span>
          : <span style={{ color: pal.accent }}>_</span>}
      </span>
    </span>
  );
}

Object.assign(window, { MK_PALETTES, MK_TYPE, Lockup });