export const colors = {
  // Backgrounds — deep cinematic dark
  background: '#060B14',
  surface: '#0F1623',
  surfaceLight: '#172033',
  surfaceHighlight: '#1E2A40',

  // Primary accent — vivid indigo-violet
  primary: '#6C4FF0',
  primaryDark: '#4A34C4',
  primaryLight: '#8B72FF',

  // Neon glow accent for highlights
  accent: '#00D4FF',

  // Text
  textPrimary: '#F0F4FF',
  textSecondary: '#7A8BA8',
  textMuted: '#3D5068',

  // Semantic
  success: '#2ECC8A',
  warning: '#F0A500',
  error: '#E05260',
  info: '#4DA8FF',

  // Rating
  imdbYellow: '#F5C518',

  // Gradients
  heroGradient: ['transparent', 'rgba(6,11,20,0.65)', '#060B14'] as string[],
  cardGradient: ['transparent', 'rgba(6,11,20,0.9)'] as string[],

  // Misc
  border: '#1E2D42',
  overlay: 'rgba(0,0,0,0.7)',
  tabBar: '#0C1420',
};

export const typography = {
  hero: {fontSize: 26, fontWeight: '800' as const, letterSpacing: 0.3},
  title: {fontSize: 20, fontWeight: '700' as const, letterSpacing: 0.2},
  subtitle: {fontSize: 16, fontWeight: '600' as const},
  body: {fontSize: 14, fontWeight: '400' as const},
  caption: {fontSize: 12, fontWeight: '400' as const},
  badge: {
    fontSize: 10,
    fontWeight: '700' as const,
    textTransform: 'uppercase' as const,
    letterSpacing: 0.5,
  },
};