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

// Primary colors
const primary100 = "#E2E9FD";
const primary200 = "#CBD6FA";
const primary300 = "#ABBBF6";
const primary400 = "#8996F0";
const primary500 = "#6C73E8";
const primary600 = "#5351DA";
const primary700 = "#433EBB";
const primary800 = "#3B389B";
const primary900 = "#34357B";

// Success colors
const success100 = "#DBFDE7";
const success200 = "#B9F9D0";
const success300 = "#83F2AB";
const success400 = "#46E27F";
const success500 = "#20D964";
const success600 = "#12A749";
const success700 = "#12833C";
const success800 = "#146733";
const success900 = "#12552D";

// Error colors
const error100 = "#FEE2E4";
const error200 = "#FFC9CD";
const error300 = "#FDA4AA";
const error400 = "#FA6F78";
const error500 = "#F1424E";
const error600 = "#E02E3A";
const error700 = "#BB1A25";
const error800 = "#9B1922";
const error900 = "#801C23";

// Grey colors
const grey100 = "#E7E7E7";
const grey200 = "#D1D1D1";
const grey300 = "#B0B0B0";
const grey400 = "#888888";
const grey500 = "#6D6D6D";
const grey600 = "#5D5D5D";
const grey700 = "#4F4F4F";
const grey800 = "#454545";
const grey900 = "#3D3D3D";

export const theme = createTheme({
	typography: {
		fontSize: 16,
		fontFamily: "Inter",
	},
	palette: {
		primary: {
			"100": primary100,
			"200": primary200,
			"300": primary300,
			"400": primary400,
			"500": primary500,
			"600": primary600,
			"700": primary700,
			"800": primary800,
			"900": primary900,
		},
		success: {
			"100": success100,
			"200": success200,
			"300": success300,
			"400": success400,
			"500": success500,
			"600": success600,
			"700": success700,
			"800": success800,
			"900": success900,
		},
		error: {
			"100": error100,
			"200": error200,
			"300": error300,
			"400": error400,
			"500": error500,
			"600": error600,
			"700": error700,
			"800": error800,
			"900": error900,
		},
		grey: {
			"100": grey100,
			"200": grey200,
			"300": grey300,
			"400": grey400,
			"500": grey500,
			"600": grey600,
			"700": grey700,
			"800": grey800,
			"900": grey900,
		},
	},
	components: {
		MuiTypography: {
			styleOverrides: {
				h5: {
					fontSize: "24px",
					fontWeight: 500,
				},
				h6: {
					fontSize: "18px",
					fontWeight: 400,
				},
			},
		},
		MuiButton: {
			styleOverrides: {
				containedPrimary: success600,
			},
		},
		MuiTextField: {
			styleOverrides: {},
		},
	},
});
