export const colors = {
  // Primary - pastel green pharmacy palette (matching PWA)
  primary: '#7fbf8f',
  primaryLight: '#cfead0',
  primaryDark: '#09310a',
  onPrimary: '#09310a',
  primaryContainer: '#cfead0',
  onPrimaryContainer: '#0d2b12',

  // Secondary - soft blue
  secondary: '#a3b8ff',
  secondaryContainer: '#dbe7ff',

  // Tertiary - soft lavender
  tertiary: '#c9b3ff',
  tertiaryContainer: '#efe7ff',

  // Scan button - vivid blue (intentionally prominent)
  scanButton: '#2b5bb5',
  scanButtonShadow: 'rgba(43, 91, 181, 0.32)',

  // Semantic
  success: '#34C759',
  danger: '#b91c1c',
  dangerContainer: '#feecec',
  warning: '#FF9500',

  // Surface
  background: '#fbfbfb',
  card: '#ffffff',
  surfaceLow: '#f2f4f5',
  surface: '#eceeef',
  surfaceHigh: '#e6e8e9',
  border: '#c0c9bb',
  separator: '#c0c9bb',

  // Text
  text: '#111417',
  textSecondary: '#41493e',
  textInverse: '#ffffff',
  textLink: '#7fbf8f',

  // Accent
  accentWarm: '#f5a97a',
};

export const darkColors = {
  // Primary - pastel green pharmacy palette
  primary: '#7fbf8f',
  primaryLight: '#2a5a35',
  primaryDark: '#cfead0',
  onPrimary: '#cfead0',
  primaryContainer: '#1a3a1c',
  onPrimaryContainer: '#cfead0',

  // Secondary - soft blue
  secondary: '#a3b8ff',
  secondaryContainer: '#1a2a4a',

  // Tertiary - soft lavender
  tertiary: '#c9b3ff',
  tertiaryContainer: '#2a1a4a',

  // Scan button - vivid blue
  scanButton: '#4a7dd5',
  scanButtonShadow: 'rgba(74, 125, 213, 0.32)',

  // Semantic
  success: '#34C759',
  danger: '#ef5350',
  dangerContainer: '#3a1a1a',
  warning: '#FF9500',

  // Surface
  background: '#121212',
  card: '#1e1e1e',
  surfaceLow: '#2a2a2a',
  surface: '#333333',
  surfaceHigh: '#3a3a3a',
  border: '#3a3a3a',
  separator: '#3a3a3a',

  // Text
  text: '#f0f0f0',
  textSecondary: '#a0a0a0',
  textInverse: '#111417',
  textLink: '#7fbf8f',

  // Accent
  accentWarm: '#f5a97a',
};

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

export const borderRadius = {
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  full: 9999,
};

export const typography = {
  title: {
    fontSize: 28,
    fontWeight: 'bold' as const,
    color: '#111417',
  },
  heading: {
    fontSize: 20,
    fontWeight: '600' as const,
    color: '#111417',
  },
  body: {
    fontSize: 16,
    fontWeight: 'normal' as const,
    color: '#111417',
  },
  bodyLarge: {
    fontSize: 18,
    fontWeight: '400' as const,
    color: '#41493e',
    lineHeight: 27,
  },
  caption: {
    fontSize: 12,
    fontWeight: 'normal' as const,
    color: '#41493e',
  },
  label: {
    fontSize: 14,
    fontWeight: '500' as const,
    color: '#41493e',
  },
};

export const shadows = {
  soft: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.08,
    shadowRadius: 20,
    elevation: 3,
  },
  card: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.06,
    shadowRadius: 8,
    elevation: 2,
  },
  scanButton: {
    shadowColor: '#2b5bb5',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.32,
    shadowRadius: 26,
    elevation: 8,
  },
};