import { createThemes } from '@because/forge'

const lightTheme = {
  // Colors
  'colors-bg': '#ffffff',
  'colors-bgElevated': '#f9fafb',
  'colors-bgMuted': '#f3f4f6',
  'colors-fg': '#111827',
  'colors-fgMuted': '#6b7280',
  'colors-fgDim': '#9ca3af',
  'colors-border': '#d1d5db',
  'colors-borderActive': '#3b82f6',

  // Button colors
  'colors-primary': '#3b82f6',
  'colors-primaryHover': '#2563eb',
  'colors-secondary': '#64748b',
  'colors-secondaryHover': '#475569',
  'colors-destructive': '#ef4444',
  'colors-destructiveHover': '#dc2626',

  // Accent colors
  'colors-success': '#22c55e',
  'colors-error': '#ef4444',
  'colors-info': '#3b82f6',

  // Box colors
  'colors-red': '#ef4444',
  'colors-green': '#22c55e',
  'colors-blue': '#3b82f6',
  'colors-gray': '#6b7280',

  // Syntax highlighting colors
  'syntax-tag': '#0ea5e9',
  'syntax-attr': '#8b5cf6',
  'syntax-string': '#10b981',
  'syntax-number': '#f59e0b',
  'syntax-brace': '#ef4444',
  'syntax-text': '#374151',

  // Spacing (TailwindSize * 4)
  'spacing-0': '0px',
  'spacing-1': '4px',
  'spacing-2': '8px',
  'spacing-3': '12px',
  'spacing-4': '16px',
  'spacing-5': '20px',
  'spacing-6': '24px',
  'spacing-8': '32px',
  'spacing-10': '40px',
  'spacing-12': '48px',
  'spacing-16': '64px',

  // Typography
  'fontSize-xs': '12px',
  'fontSize-sm': '14px',
  'fontSize-base': '16px',
  'fontSize-lg': '18px',
  'fontSize-xl': '20px',
  'fontSize-2xl': '24px',

  // Font weights
  'fontWeight-normal': '400',
  'fontWeight-medium': '500',
  'fontWeight-semibold': '600',
  'fontWeight-bold': '700',

  // Radii
  'radius-sm': '4px',
  'radius-md': '6px',
  'radius-lg': '8px',
  'radius-full': '9999px',
} as const

const darkTheme = {
  ...lightTheme,
  'colors-bg': '#0a0a0a',
  'colors-bgElevated': '#111111',
  'colors-bgMuted': '#1a1a1a',
  'colors-fg': '#ffffff',
  'colors-fgMuted': '#a1a1a1',
  'colors-fgDim': '#6b7280',
  'colors-border': '#333333',
  'colors-borderActive': '#60a5fa',

  // Dark mode syntax highlighting
  'syntax-tag': '#bfdbfe',
  'syntax-attr': '#e9d5ff',
  'syntax-string': '#a7f3d0',
  'syntax-number': '#fde68a',
  'syntax-brace': '#fecaca',
  'syntax-text': '#f9fafb',
} as const

export const theme = createThemes({
  light: lightTheme,
  dark: darkTheme,
})