src/chronixel-src/chronixel/theme.ts

// @ts-nocheck
// Chronixel design tokens — dark cinematic, glass UI, single orange accent.
export const C = {
  // backgrounds
  bg0: "#05060a", // deepest black-blue
  bg1: "#0a0c12",
  bg2: "#12151d",
  grid: "rgba(255,255,255,0.035)",
  gridStrong: "rgba(255,255,255,0.06)",

  // text
  text: "#f4f1ea", // off-white
  textDim: "rgba(244,241,234,0.55)",
  textFaint: "rgba(244,241,234,0.28)",

  // glass surfaces (cold / inactive)
  glass: "rgba(255,255,255,0.045)",
  glassBorder: "rgba(255,255,255,0.10)",
  glassHi: "rgba(255,255,255,0.14)",

  // orange accent (warm / active)
  accent: "#ff7a18",
  accent2: "#ff9d3c",
  accentDeep: "#e85d04",
  accentGlow: "rgba(255,122,24,0.55)",
  accentSoft: "rgba(255,122,24,0.14)",

  // cool counter-tone — used only for cinematic color separation (teal-orange
  // grade, depth in shadows, aurora ambiance). Never a UI accent; the brand
  // stays single-orange. Keeps shadows from going muddy-grey.
  cool: "#3a7bd5",
  coolDeep: "#1b2b4a",
  coolSoft: "rgba(58,123,213,0.10)",
} as const;

// Orange gradient used for highlights / hero elements.
export const ACCENT_GRAD = `linear-gradient(135deg, ${C.accent2} 0%, ${C.accent} 45%, ${C.accentDeep} 100%)`;
export const ACCENT_GRAD_TEXT = `linear-gradient(120deg, ${C.accent2}, ${C.accent})`;

export const FPS = 30;
export const W = 1920;
export const H = 1080;

/* ============================================================================
   THEMING — additive. The frozen `C` above is the canonical Chronixel orange and
   every existing scene still imports it unchanged. `makeTheme()` lets a video swap
   its accent ramp (or run a light surface) without forking scene code, and the
   SEMANTIC tokens give success/warn/info a consistent, desaturated home.
   ========================================================================== */

// "#rrggbb" (+ optional alpha) → "rgba(r,g,b,a)". Lets accent swaps recompute glows.
export const withAlpha = (hex: string, a = 1): string => {
  const h = hex.replace("#", "");
  const n = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  const r = parseInt(n.slice(0, 2), 16);
  const g = parseInt(n.slice(2, 4), 16);
  const b = parseInt(n.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
};

// named accent ramps a video can pick from (kept desaturated/cinematic — no neon).
export const ACCENTS = {
  orange: { accent: "#ff7a18", accent2: "#ff9d3c", accentDeep: "#e85d04" },
  clay: { accent: "#d97757", accent2: "#e09177", accentDeep: "#c6613f" },
  sky: { accent: "#5a8fd6", accent2: "#79a8e6", accentDeep: "#3a6fb5" },
  violet: { accent: "#8b7cd9", accent2: "#a594e8", accentDeep: "#6a5bc0" },
  emerald: { accent: "#4fae7d", accent2: "#6fc499", accentDeep: "#358a5f" },
} as const;
export type AccentName = keyof typeof ACCENTS;

// status colours — desaturated so they sit in the cinematic grade, never neon.
export const SEMANTIC = {
  success: "#54a06f",
  warn: "#e0a23c",
  danger: "#d9534f",
  info: C.cool,
} as const;

export type Theme = { [K in keyof typeof C]: string } & {
  accentGrad: string;
  accentGradText: string;
};

// Build a theme object with a swapped accent ramp (glows/softs recomputed).
// Pass a named accent or explicit hexes; defaults to the canonical orange.
export const makeTheme = (
  accent: AccentName | { accent: string; accent2: string; accentDeep: string } = "orange",
): Theme => {
  const a = typeof accent === "string" ? ACCENTS[accent] : accent;
  return {
    ...C,
    accent: a.accent,
    accent2: a.accent2,
    accentDeep: a.accentDeep,
    accentGlow: withAlpha(a.accent, 0.55),
    accentSoft: withAlpha(a.accent, 0.14),
    accentGrad: `linear-gradient(135deg, ${a.accent2} 0%, ${a.accent} 45%, ${a.accentDeep} 100%)`,
    accentGradText: `linear-gradient(120deg, ${a.accent2}, ${a.accent})`,
  };
};