/** Centralized visual theme for canvas rendering — no magic numbers in draw code */

export const THEME = {
  grid: {
    color: '#333',
    lineWidth: 0.5,
  },
  selection: {
    strokeColor: '#00ff88',
    lineWidth: 0.5,
    pad: 1,
    shadowColor: 'rgba(0, 255, 136, 0.3)',
    shadowBlur: 2,
  },
  collision: {
    strokeColor: '#ff0000',
    lineWidth: 0.5,
    pad: 1,
    shadowColor: 'rgba(255, 0, 0, 0.4)',
    shadowBlur: 3,
  },
  hover: {
    strokeColor: 'rgba(233, 69, 96, 0.2)',
    lineWidth: 0.5,
  },
  dropTarget: {
    strokeColor: '#00ccff',
    lineWidth: 1.5,
    pad: 3,
    shadowColor: 'rgba(0, 204, 255, 0.5)',
    shadowBlur: 6,
    fillColor: 'rgba(0, 204, 255, 0.08)',
  },
  label: {
    color: '#e94560',
    font: '3px sans-serif',
    offsetY: -3,
  },
  resizeHandle: {
    size: 6,
    hitSize: 14,
    fillColor: '#00ff88',
    strokeColor: '#009955',
    lineWidth: 0.5,
  },
  epcWaypoint: {
    size: 6,
    fillColor: '#00ccff',
    strokeColor: '#0088aa',
    lineWidth: 1,
    hintFont: '6px sans-serif',
    hintOffsetY: -4,
  },
  epcBody: {
    lineColor: '#000000',
    rightBoxFill: '#aaaaaa',
    rightBoxStroke: '#000000',
    rightBoxStrokeWidth: 1.5,
  },
  induction: {
    fillColor: '#ffffff',
    strokeColor: '#000000',
    lineWidth: 1,
  },
  marquee: {
    strokeColor: '#4a9eff',
    lineWidth: 1,
    dash: [4, 3] as readonly number[],
    fillColor: 'rgba(74, 158, 255, 0.1)',
  },
  canvas: {
    maxRenderScale: 4,
  },
} as const;