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

const palette = {
  primary: {
    main: '#1976d2', 
  },
  secondary: {
    main: '#d32f2f',
  },
  background: {
    default: '#fafafa',
    paper: '#ffffff',
    primary: 'rgb(69, 190, 171)',
  },
  text: {
    primary: '#000000',
    secondary: '#555555',
    tertiary: '#fff',
  },
  action: {
    hover: 'rgba(0, 0, 0, 0.08)',
  },
};

const typography = {
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  h1: {
    fontSize: '3rem',
    fontWeight: 700,
  },
  h2: {
    fontSize: '2.5rem',
    fontWeight: 700,
  },
  body1: {
    fontSize: '1rem',
    fontWeight: 400,
  },
};

// Create the theme based on the light or dark mode preference
const theme = createTheme({
  palette: {
    mode: 'light', // Change this to 'dark' for dark mode
   ...palette
  },
  // typography,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
});

export default theme;