// Global color palette constants for JS/Canvas usage
// Matches tailwind.config.ts colors

export const PALETTE = {
  // Zinc Scale
  zinc: {
    50: '#fafafa',
    100: '#f4f4f5',
    200: '#e4e4e7',
    300: '#d4d4d8',
    400: '#a1a1aa',
    500: '#71717a',
    600: '#52525b',
    700: '#3f3f46',
    800: '#27272a',
    900: '#18181b',
    950: '#09090b',
  },
  
  // Semantic Colors (Dark Mode)
  background: '#09090b', // zinc-950
  foreground: '#fafafa', // zinc-50
  
  card: {
    bg: '#18181b', // zinc-900
    border: '#27272a', // zinc-800
  },
  
  primary: {
    DEFAULT: '#fafafa',
    foreground: '#18181b',
  },
  
  muted: {
    DEFAULT: '#27272a', // zinc-800
    foreground: '#a1a1aa', // zinc-400
  },
  
  // Canvas Specific
  canvas: {
    bg: '#09090b', // zinc-950
    grid: '#27272a', // zinc-800
    nodeBg: '#18181b', // zinc-900
    nodeBorder: '#27272a', // zinc-800
    selection: 'rgba(59, 130, 246, 0.1)', // blue-500 with opacity
    connection: '#52525b', // zinc-600
  }
} as const;

export default PALETTE;
