'use client';

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

// Purple/Pink gradient theme - New default theme
export const purpleTheme = createTheme({
  palette: {
    primary: {
      main: '#7c3aed', // Adjusted purple for better contrast (WCAG AA compliant)
      light: '#a78bfa', // Light purple
      dark: '#5b21b6', // Dark purple
      contrastText: '#ffffff', // Ensure white text
    },
    secondary: {
      main: '#ff7094', // Pink
      light: '#ffb3e4', // Light pink
      dark: '#e6537a', // Dark pink
    },
    background: {
      default: '#faf8ff', // Very light purple tint
      paper: '#ffffff',
    },
    text: {
      primary: '#2D3748', // Dark gray - 4.5:1+ contrast
      secondary: '#4A5568', // Darker gray for better contrast
    },
    success: {
      main: '#10b981',
      light: '#6ee7b7',
      dark: '#047857',
    },
    warning: {
      main: '#f59e0b',
      light: '#fbbf24',
      dark: '#d97706',
    },
    error: {
      main: '#ef4444',
      light: '#fca5a5',
      dark: '#dc2626',
    },
    info: {
      main: '#3b82f6',
      light: '#93c5fd',
      dark: '#2563eb',
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2rem',
      fontWeight: 600,
    },
    h2: {
      fontSize: '1.75rem',
      fontWeight: 600,
    },
    h3: {
      fontSize: '1.5rem',
      fontWeight: 600,
    },
    h4: {
      fontSize: '1.25rem',
      fontWeight: 600,
    },
    h5: {
      fontSize: '1.125rem',
      fontWeight: 600,
    },
    h6: {
      fontSize: '1rem',
      fontWeight: 600,
    },
    body1: {
      fontSize: '1rem',
    },
    body2: {
      fontSize: '0.875rem',
    },
  },
  shape: {
    borderRadius: 16,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 24,
          textTransform: 'none',
          minHeight: 48, // Touch target size
          fontSize: '1rem',
          fontWeight: 500,
          paddingLeft: 24,
          paddingRight: 24,
        },
        sizeLarge: {
          minHeight: 56,
          fontSize: '1.125rem',
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiInputBase-root': {
            minHeight: 48,
            borderRadius: 16,
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 20,
          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          borderRadius: 16,
        },
        elevation1: {
          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.06)',
        },
        elevation2: {
          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
        },
        elevation3: {
          boxShadow: '0 6px 30px rgba(0, 0, 0, 0.1)',
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          fontWeight: 500,
        },
      },
    },
  },
});