/**
 * 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.
 *
 * PALETTE: Electric Blue (2026-04-26)
 * Direction: Dark industrial base + electric blue accents
 */

export const colors = {
  // Base colors
  background: "#131313",
  "on-background": "#dde4f0",
  foreground: "#dde4f0",

  // Surface tones — cool blue-tinted darks
  surface: {
    DEFAULT: "#131313",
    dim: "#131313",
    bright: "#1e2535",
    "container-lowest": "#0a0c14",
    "container-low": "#131824",
    container: "#181e2e",
    "container-high": "#1e2538",
    "container-highest": "#252d42",
    variant: "#252d42",
  },

  // Primary — Electric Blue
  primary: {
    DEFAULT: "#58a6ff",
    foreground: "#001a4d",
    container: "#1d6fd4",
    "on-container": "#cce0ff",
    fixed: "#cce0ff",
    "fixed-dim": "#58a6ff",
    "on-fixed": "#001533",
    "on-fixed-variant": "#003380",
    inverse: "#1d5fa8",
  },

  // Secondary — Cool blue-grey (replaces warm grey)
  secondary: {
    DEFAULT: "#9aa5be",
    foreground: "#1a2030",
    container: "#3d4d6b",
    "on-container": "#bdc8e0",
    fixed: "#dde4f0",
    "fixed-dim": "#9aa5be",
    "on-fixed": "#0d1220",
    "on-fixed-variant": "#3d4d6b",
  },

  // Tertiary — Cyan-teal (replaces neon green — complements blue)
  tertiary: {
    DEFAULT: "#00d4aa",
    foreground: "#003328",
    container: "#00a882",
    "on-container": "#b3fff0",
    fixed: "#b3fff0",
    "fixed-dim": "#00d4aa",
    "on-fixed": "#002820",
    "on-fixed-variant": "#005544",
  },

  // Error — pure red (no rose/pink cast)
  error: {
    DEFAULT: "#ff5f52",
    foreground: "#1a0000",
    container: "#7a0000",
    "on-container": "#ffdad6",
  },

  // Outline — blue-tinted borders (replaces warm brown)
  outline: "#3d5a8a",
  "outline-variant": "#1e3055",

  // Inverse
  "inverse-surface": "#dde4f0",
  "inverse-on-surface": "#1a2030",

  // Semantic
  border: "#252d42",
  muted: "#5a6a8a",
  info: "#58a6ff",
  success: "#00d4aa",
  warning: "#f0a040",
  alert: "#ff5f52",
};

export const spacing = {
  unit: "4px",
  "stack-sm": "8px",
  "stack-md": "16px",
  gutter: "16px",
  margin: "32px",
  "container-gap": "24px",
};