import { createTheme, MantineColorsTuple } from '@mantine/core';

// Color Psychology:
// Primary (Blue-Purple gradient): Trust, innovation, creativity
// Accent (Coral): Energy, friendliness, approachability  
// Success (Teal): Growth, clarity, balance
// Dark mode optimized for reduced eye strain

const primary: MantineColorsTuple = [
  '#f3f0ff',
  '#e5deff', 
  '#c8b9ff',
  '#ab91ff',
  '#9670ff',
  '#8759ff',
  '#7d4cff',
  '#6b3de6',
  '#5f35cc',
  '#512ab3'
];

const accent: MantineColorsTuple = [
  '#fff0ec',
  '#ffe0d6',
  '#ffbfa8',
  '#ff9b76',
  '#ff7d4d',
  '#ff6933',
  '#ff5e26',
  '#e44d1a',
  '#ca4217',
  '#b13812'
];

const teal: MantineColorsTuple = [
  '#e6fcf5',
  '#c3fae8',
  '#96f2d7',
  '#63e6be',
  '#38d9a9',
  '#20c997',
  '#12b886',
  '#0ca678',
  '#099268',
  '#087f5b'
];

export const theme = createTheme({
  primaryColor: 'brand',
  colors: {
    brand: primary,
    accent: accent,
    teal: teal
  },
  
  // Modern, clean typography
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  fontFamilyMonospace: '"Fira Code", "JetBrains Mono", monospace',
  
  // Smooth shadows for depth
  shadows: {
    xs: '0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)',
    sm: '0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06)',
    md: '0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05)',
    lg: '0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.04)',
    xl: '0 25px 50px rgba(0, 0, 0, 0.06)'
  },
  
  // Smooth radius for modern feel
  radius: {
    xs: '4px',
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '24px'
  },
  
  // Enhanced focus styles for accessibility
  focusRing: 'auto',
  
  // Component specific styles
  components: {
    Button: {
      defaultProps: {
        radius: 'md'
      }
    },
    Card: {
      defaultProps: {
        radius: 'lg',
        shadow: 'sm'
      }
    },
    Code: {
      defaultProps: {
        radius: 'sm'
      }
    }
  }
});