/**
 * Theme configuration for Pottery Diary
 * Modern, US-market optimized design with clear signaling colors
 */

export const colors = {
  // Primary colors - Coral/Orange for buttons and accents
  primary: '#E07A5F', // Coral/Orange accent
  primaryLight: '#BF6B50', // Darker coral for cards/active states
  primaryDark: '#C56548', // Darker coral for active states

  // Accent colors - Green for status indicators
  accent: '#537A2F', // Green accent
  accentLight: '#6B9A3E', // Lighter green
  accentDark: '#3F5D24', // Darker green

  // Backgrounds - Dark brown theme
  background: '#3D352E', // Main dark brown
  backgroundSecondary: '#4F4640', // Card/Surface warm brown
  card: '#4F4640', // Same as backgroundSecondary

  // Text - Light on dark
  text: '#D2CCC5', // Primary text (light warm)
  textSecondary: '#BFC0C1', // Secondary text
  textTertiary: '#959693', // Dimmed text/icons
  buttonText: '#FFFFFF', // White text for primary buttons (better contrast)

  // Borders - Subtle on dark backgrounds
  border: '#6B6460', // Slightly lighter than card for visibility
  borderLight: '#5A514B', // Chip background color

  // Status colors
  success: '#537A2F', // Green accent (same as accent)
  successLight: '#6B9A3E', // Lighter green background
  warning: '#E07A5F', // Use coral for warnings on dark bg
  error: '#DC2626', // Keep red for errors (good contrast)
  info: '#E07A5F', // Use coral for info

  // Step type colors - Adjusted for dark backgrounds
  forming: '#C89B7C', // Lighter clay tone
  trimming: '#A89080', // Neutral tan
  drying: '#D9C5A0', // Lighter sand
  bisqueFiring: '#D67B59', // Coral variant
  glazing: '#9B8B9B', // Lighter mauve
  glazeFiring: '#E07A5F', // Coral (same as primary)
  misc: '#959693', // Same as textTertiary
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
};

export const typography = {
  fontSize: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 20, // Slightly larger for retro feel
    xl: 28, // Bigger, bolder headers
    xxl: 36,
  },
  fontWeight: {
    regular: '400' as const,
    medium: '500' as const,
    semiBold: '600' as const,
    bold: '800' as const, // Bolder for retro headings
  },
  // Retro-style letter spacing
  letterSpacing: {
    tight: -0.5,
    normal: 0,
    wide: 0.5,
    wider: 1,
  },
};

export const borderRadius = {
  sm: 6,
  md: 12, // More rounded for retro feel
  lg: 16,
  xl: 24,
  full: 9999,
};

export const shadows = {
  sm: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3,
    elevation: 2,
  },
  md: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.3,
    shadowRadius: 6,
    elevation: 4,
  },
  lg: {
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 5 },
    shadowOpacity: 0.4,
    shadowRadius: 10,
    elevation: 6,
  },
};

// Minimum tappable size for accessibility
export const MIN_TAP_SIZE = 44;

export const stepTypeColors = {
  forming: colors.forming,
  trimming: colors.trimming,
  drying: colors.drying,
  bisque_firing: colors.bisqueFiring,
  glazing: colors.glazing,
  glaze_firing: colors.glazeFiring,
  misc: colors.misc,
};

export const stepTypeIcons: Record<string, string> = {
  forming: '🏺',
  trimming: '🔧',
  drying: '☀️',
  bisque_firing: '🔥',
  glazing: '🎨',
  glaze_firing: '⚡',
  misc: '📝',
};

export const stepTypeLabels: Record<string, string> = {
  forming: 'Forming',
  trimming: 'Trimming',
  drying: 'Drying',
  bisque_firing: 'Bisque Firing',
  glazing: 'Glazing',
  glaze_firing: 'Glaze Firing',
  misc: 'Misc',
};