refactor: consolidate color definitions into single source of truth

- Create frontend/colors.mjs as SSOT for all design colors
- Create scripts/generate-css-vars.mjs to auto-generate CSS variables
- Update tailwind.config.ts to import colors from colors.mjs
- Update frontend/package.json: add 'generate-css-vars' script to build pipeline
- Update start_servers.py: include CSS variable generation before npm build
- All color changes now require only one edit in colors.mjs
- Build process auto-syncs CSS variables and Tailwind colors

Eliminates DRY violation where colors were duplicated in:
  - tailwind.config.ts (Tailwind utility classes)
  - globals.css (CSS custom properties)

Single source of truth approach ensures:
  ✓ No inconsistency between Tailwind and CSS variables
  ✓ One place to update colors for all contexts
  ✓ Automated CSS variable generation on every build

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

frontend/colors.mjs

@@ -0,0 +1,98 @@
+/**
+ * SINGLE SOURCE OF TRUTH for all design colors
+ * Used by:
+ * - tailwind.config.ts (Tailwind utility classes)
+ * - scripts/generate-css-vars.mjs (CSS variables in globals.css)
+ *
+ * Changes here automatically propagate to both files via build step.
+ */
+
+export const colors = {
+  // Base colors from DESIGN.md
+  background: "#131313",
+  "on-background": "#e5e2e1",
+  foreground: "#e5e2e1",
+
+  // Surface tones from DESIGN.md
+  surface: {
+    DEFAULT: "#131313",
+    dim: "#131313",
+    bright: "#3a3939",
+    "container-lowest": "#0e0e0e",
+    "container-low": "#1c1b1b",
+    container: "#201f1f",
+    "container-high": "#2a2a2a",
+    "container-highest": "#353534",
+    variant: "#353534",
+  },
+
+  // Primary colors from DESIGN.md
+  primary: {
+    DEFAULT: "#ffb781",
+    foreground: "#4e2600",
+    container: "#f58618",
+    "on-container": "#5b2d00",
+    fixed: "#ffdcc4",
+    "fixed-dim": "#ffb781",
+    "on-fixed": "#2f1400",
+    "on-fixed-variant": "#6f3800",
+    inverse: "#924c00",
+  },
+
+  // Secondary colors from DESIGN.md
+  secondary: {
+    DEFAULT: "#c8c6c5",
+    foreground: "#303030",
+    container: "#474746",
+    "on-container": "#b7b5b4",
+    fixed: "#e5e2e1",
+    "fixed-dim": "#c8c6c5",
+    "on-fixed": "#1b1c1c",
+    "on-fixed-variant": "#474746",
+  },
+
+  // Tertiary colors from DESIGN.md
+  tertiary: {
+    DEFAULT: "#00e639",
+    foreground: "#003907",
+    container: "#00bd2d",
+    "on-container": "#00440a",
+    fixed: "#72ff70",
+    "fixed-dim": "#00e639",
+    "on-fixed": "#002203",
+    "on-fixed-variant": "#00530e",
+  },
+
+  // Error colors from DESIGN.md
+  error: {
+    DEFAULT: "#ffb4ab",
+    foreground: "#690005",
+    container: "#93000a",
+    "on-container": "#ffdad6",
+  },
+
+  // Outline colors from DESIGN.md
+  outline: "#a48c7c",
+  "outline-variant": "#564335",
+
+  // Inverse colors from DESIGN.md
+  "inverse-surface": "#e5e2e1",
+  "inverse-on-surface": "#313030",
+
+  // Semantic colors
+  border: "#353534",
+  muted: "#9f9e9d",
+  info: "#64b5f6",
+  success: "#00e639",
+  warning: "#ffb781",
+  alert: "#ffb4ab",
+};
+
+export const spacing = {
+  unit: "4px",
+  "stack-sm": "8px",
+  "stack-md": "16px",
+  gutter: "16px",
+  margin: "32px",
+  "container-gap": "24px",
+};