source/src/theme.ts

// ──────────────────────────────────────────────────────────────
// The "forge" palette — ported from hf-motion / AdithyaSK.
// 3 colors only:  bg (near-black / white) · lavender (synthesis) · emerald (verified)
// Everything else is muted greys for text. Dark + light mirror each other
// so slide code is identical; only the values change.
// ──────────────────────────────────────────────────────────────

export type Palette = {
  bg: string;
  bgRaised: string;
  border: string;
  borderStrong: string;
  white: string; // max-contrast foreground (near-white on dark, ink on light)
  text: string;
  textMuted: string;
  textDim: string;
  lavender: string;
  lavenderDim: string;
  emerald: string;
  emeraldDim: string;
  diffPlus: string;
  diffMinus: string;
};

export type Glow = {
  emerald: string;
  lavender: string;
  emeraldText: string;
  lavenderText: string;
};

export const dark: Palette = {
  bg: "#07090f",
  bgRaised: "#0e1422",
  border: "#283149",
  borderStrong: "#3a4560",
  white: "#ffffff",
  text: "#f8fafd", // primary — near-white
  textMuted: "#d0d8e6", // secondary — brightened for readability on dark
  textDim: "#97a1b5", // tertiary / structural — brightened
  lavender: "#b06bff",
  lavenderDim: "#7d3ff0",
  emerald: "#10f0a4",
  emeraldDim: "#0bc586",
  diffPlus: "#10f0a4",
  diffMinus: "#ff5470",
};

export const light: Palette = {
  bg: "#fbfcfe",
  bgRaised: "#ffffff",
  border: "#e3e8f1",
  borderStrong: "#cbd3e1",
  white: "#0b1020",
  text: "#1a2233",
  textMuted: "#5a6679",
  textDim: "#9aa4b6",
  lavender: "#7c3aed",
  lavenderDim: "#9d6bff",
  emerald: "#059669",
  emeraldDim: "#0a9d6e",
  diffPlus: "#059669",
  diffMinus: "#e11d48",
};

export const darkGlow: Glow = {
  emerald: "0 0 18px rgba(16,240,164,0.45)",
  lavender: "0 0 18px rgba(176,107,255,0.45)",
  emeraldText: "0 0 22px rgba(16,240,164,0.55)",
  lavenderText: "0 0 22px rgba(176,107,255,0.5)",
};

export const lightGlow: Glow = {
  emerald: "0 8px 24px rgba(5,150,105,0.18)",
  lavender: "0 8px 24px rgba(124,58,237,0.16)",
  emeraldText: "none",
  lavenderText: "none",
};

export const MONO =
  'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace';

export type Mode = "dark" | "light";

export type Theme = {
  mode: Mode;
  T: Palette;
  glow: Glow;
};

export const themeFor = (mode: Mode): Theme =>
  mode === "dark"
    ? { mode, T: dark, glow: darkGlow }
    : { mode, T: light, glow: lightGlow };

// ── Design canvas ──────────────────────────────────────────────
// Every slide is authored against this fixed 16:9 canvas and then
// uniformly scaled to fit the viewport. Guarantees an identical
// layout on any projector / screen.
export const STAGE_W = 1280;
export const STAGE_H = 720;