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",
  },
  button: {
    primary: "#0070f3",
    secondary: "##FF00FF",
  },
  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;