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

export const theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#152642',
      light: '#1e3a5f',
      dark: '#0e1c30',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#2d6a8f',
      light: '#4a8ab0',
      dark: '#1e4d68',
      contrastText: '#ffffff',
    },
    background: {
      default: '#f9f8f6',
      paper: '#ffffff',
    },
    text: {
      primary: '#141414',
      secondary: '#5c5c5c',
    },
    error: { main: '#b91c1c' },
    warning: { main: '#a16207' },
    success: { main: '#1d6342' },
    info: { main: '#2563eb' },
    divider: '#e8e7e4',
  },
  typography: {
    fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
    h1: { fontSize: '1.75rem', fontWeight: 700, letterSpacing: '-0.02em' },
    h2: { fontSize: '1.5rem', fontWeight: 600, letterSpacing: '-0.01em' },
    h3: { fontSize: '1.25rem', fontWeight: 600 },
    h4: { fontSize: '1.125rem', fontWeight: 600 },
    h5: { fontSize: '1rem', fontWeight: 600 },
    h6: { fontSize: '0.9375rem', fontWeight: 600 },
    subtitle1: { fontSize: '0.875rem', fontWeight: 600, lineHeight: 1.5 },
    subtitle2: { fontSize: '0.8125rem', fontWeight: 600, lineHeight: 1.4 },
    body1: { fontSize: '0.875rem', lineHeight: 1.6 },
    body2: { fontSize: '0.8125rem', lineHeight: 1.5 },
    caption: { fontSize: '0.75rem', lineHeight: 1.4, color: '#9a9a9a' },
    overline: { fontSize: '0.6875rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' },
    button: { fontSize: '0.8125rem', fontWeight: 600, textTransform: 'none' },
  },
  shape: { borderRadius: 4 },
  shadows: [
    'none',
    '0 1px 2px rgba(0,0,0,0.05)',
    '0 1px 3px rgba(0,0,0,0.06)',
    '0 2px 4px rgba(0,0,0,0.06)',
    '0 3px 6px rgba(0,0,0,0.07)',
    '0 4px 8px rgba(0,0,0,0.07)',
    '0 5px 10px rgba(0,0,0,0.08)', '0 6px 12px rgba(0,0,0,0.08)',
    '0 7px 14px rgba(0,0,0,0.08)', '0 8px 16px rgba(0,0,0,0.08)',
    '0 9px 18px rgba(0,0,0,0.08)', '0 10px 20px rgba(0,0,0,0.09)',
    '0 11px 22px rgba(0,0,0,0.09)', '0 12px 24px rgba(0,0,0,0.09)',
    '0 13px 26px rgba(0,0,0,0.09)', '0 14px 28px rgba(0,0,0,0.09)',
    '0 15px 30px rgba(0,0,0,0.09)', '0 16px 32px rgba(0,0,0,0.09)',
    '0 17px 34px rgba(0,0,0,0.09)', '0 18px 36px rgba(0,0,0,0.09)',
    '0 19px 38px rgba(0,0,0,0.09)', '0 20px 40px rgba(0,0,0,0.09)',
    '0 21px 42px rgba(0,0,0,0.09)', '0 22px 44px rgba(0,0,0,0.09)',
    '0 24px 48px rgba(0,0,0,0.10)',
  ],
  components: {
    MuiCard: {
      defaultProps: { elevation: 1 },
      styleOverrides: {
        root: {
          border: '1px solid #e8e7e4',
          '&:hover': { borderColor: '#c8c7c4' },
          transition: 'border-color 0.15s ease',
        },
      },
    },
    MuiButton: {
      defaultProps: { disableElevation: true },
      styleOverrides: {
        root: { borderRadius: 4, padding: '6px 16px' },
        contained: {
          '&.MuiButton-containedPrimary': {
            background: '#152642',
            '&:hover': { background: '#0e1c30' },
          },
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: { borderRadius: 4, fontSize: '0.75rem', fontWeight: 500, height: 22 },
      },
    },
    MuiTableCell: {
      styleOverrides: {
        head: { fontWeight: 600, fontSize: '0.75rem', color: '#9a9a9a', textTransform: 'uppercase', letterSpacing: '0.05em', padding: '8px 12px' },
        body: { fontSize: '0.8125rem', padding: '10px 12px' },
      },
    },
    MuiTooltip: {
      defaultProps: { arrow: true },
    },
    MuiPaper: {
      styleOverrides: {
        root: { backgroundImage: 'none' },
      },
    },
  },
})
