import { createTheme } from "@mui/material";
//import { createTheme } from "./types";

const fontFamily: string = "GilroyRegular";
const fontWeight: string = "600";

const theme = createTheme({
  palette: {
    primary: {
      light: "#26272c",
      main: "#111217"
    },
    secondary: {
      main: "#ffffff"
    },
    info: {
      main: "#eaba5b"
    }
  },

  typography: {
    body1: {
      fontFamily: fontFamily
    },
    subtitle1: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 21,
    },
    subtitle2: {
      fontFamily: fontFamily,
      fontSize: 21,
      lineHeight: "37.5px"
    },
    caption: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 21,
    },
    h5: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 33,
    },
    h6: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 17,
    },
  },
});


declare module '@mui/material/styles' {
  interface Theme {
    palette: {
      primary: {
        light: string;
        main: string;
      },
      secondary: {
        main: string;
      }
    }
  }
  // allow configuration using `createTheme`
  interface TypographyVariants {
    body1: React.CSSProperties;
    subtitle1: React.CSSProperties;
    subtitle2: React.CSSProperties;
    caption: React.CSSProperties;
    h5: React.CSSProperties;
    h6: React.CSSProperties;
  }
}


export default theme;