/** Brand tokens, mirrored from apps/web (Tailwind slate scale, white paper, mono labels). */
export const COLOR = {
  paper: "#ffffff",
  ink: "#0f172a", // slate-900
  inkSoft: "#1e293b", // slate-800
  body: "#475569", // slate-600
  muted: "#64748b", // slate-500
  faint: "#94a3b8", // slate-400
  line: "#e2e8f0", // slate-200
  wash: "#f8fafc", // slate-50
  active: "#fbbf24", // amber-400: work in progress
  done: "#10b981", // emerald-500: finished
} as const;

/** Colours for drawings, which sit on a dark panel like the animated panels of the website. */
export const DRAW = {
  bg: "#0f172a", // slate-900: the panel
  raised: "#1e293b", // slate-800: quiet surfaces on the panel
  soft: "#334155", // slate-700: placeholder lines and blocks
  label: "#94a3b8", // slate-400: mono labels
  fg: "#f8fafc", // slate-50: lines, tiles, text
  rim: "#64748b", // slate-500: fine outlines of quiet things
  tint: "rgba(248, 250, 252, 0.14)", // a lit surface: a light tint instead of a solid block
  glass: "rgba(15, 23, 42, 0.55)", // windows and cards: the dot grid shows through
  mark: "#fde68a", // amber-200: work that is travelling
  glow: "99, 102, 241", // indigo-500 as r, g, b: the light along the edge
  light: "129, 140, 248", // indigo-400 as r, g, b: the light on buttons and nodes
  core: "224, 231, 255", // indigo-100 as r, g, b: its bright centre
} as const;

/** Output formats. LinkedIn feed default is 4:5; the others are variants of the same video. */
export const FORMATS = {
  feed: { width: 1080, height: 1350 },
  square: { width: 1080, height: 1080 },
  story: { width: 1080, height: 1920 },
  /** 16:9 for YouTube and Google Ads video campaigns. */
  wide: { width: 1920, height: 1080 },
} as const;

export type FormatName = keyof typeof FORMATS;

export const FPS = 30;