import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#E8453C',
      light: '#EF6B63',
      dark: '#C02E26',
      contrastText: '#FFFFFF',
    },
    success: {
      main: '#4CAF50',
      light: '#66BB6A',
      dark: '#388E3C',
    },
    secondary: {
      main: '#CE82FF',
      light: '#DDA0FF',
      dark: '#A855E0',
      contrastText: '#FFFFFF',
    },
    error: {
      main: '#FF4B4B',
      light: '#FF7070',
      dark: '#CC3C3C',
    },
    warning: {
      main: '#FFC800',
      light: '#FFD633',
      dark: '#CCA000',
    },
    background: {
      default: '#131F24',
      paper: '#1B2B32',
    },
    text: {
      primary: '#FFFFFF',
      secondary: '#AFAFAF',
    },
  },
  typography: {
    fontFamily: '"Nunito", sans-serif',
    button: {
      fontWeight: 700,
      textTransform: 'uppercase',
      letterSpacing: '0.05em',
    },
    h4: {
      fontWeight: 700,
    },
    h5: {
      fontWeight: 700,
    },
    h6: {
      fontWeight: 700,
    },
  },
  shape: {
    borderRadius: 16,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 16,
          fontWeight: 700,
          fontSize: '1rem',
          padding: '12px 24px',
          textTransform: 'uppercase',
          boxShadow: '0 4px 0 rgba(0,0,0,0.3)',
          transition: 'all 0.15s ease',
          '&:active': {
            boxShadow: '0 1px 0 rgba(0,0,0,0.3)',
            transform: 'translateY(3px)',
          },
        },
        containedPrimary: {
          boxShadow: '0 4px 0 #C02E26',
          '&:hover': {
            backgroundColor: '#EF6B63',
            boxShadow: '0 4px 0 #C02E26',
          },
          '&:active': {
            boxShadow: '0 1px 0 #C02E26',
          },
        },
        containedSecondary: {
          boxShadow: '0 4px 0 #A855E0',
          '&:hover': {
            backgroundColor: '#DDA0FF',
            boxShadow: '0 4px 0 #A855E0',
          },
          '&:active': {
            boxShadow: '0 1px 0 #A855E0',
          },
        },
        containedError: {
          boxShadow: '0 4px 0 #CC3C3C',
          '&:hover': {
            backgroundColor: '#FF7070',
            boxShadow: '0 4px 0 #CC3C3C',
          },
          '&:active': {
            boxShadow: '0 1px 0 #CC3C3C',
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 16,
          backgroundImage: 'none',
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 12,
          },
        },
      },
    },
  },
});

export default theme;