import { Roboto } from "next/font/google";
import { experimental_extendTheme as extendTheme } from "@mui/material/styles";

export const roboto = Roboto({
  weight: ["300", "400", "500", "700"],
  subsets: ["latin"],
  display: "swap",
  fallback: ["Helvetica", "Arial", "sans-serif"],
});

/**
 * https://mui.com/material-ui/experimental-api/css-theme-variables/customization/
 *
 * TL;DR
 * - specify both dark and light colors at once
 * - extendTheme returns a theme for CssVarsProvider, not ThemeProvider
 * - CssVarsProvider has a defaultMode property, set to "system" in _app.tsx
 */
const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: "#40088d",
        },
        secondary: {
          main: "#038225",
        },
      },
    },
    dark: {
      palette: {
        primary: {
          main: "#2c90fc",
        },
        secondary: {
          main: "#b827fc",
        },
      },
    },
  },
  typography: {
    ...roboto.style,
    h1: {
      fontSize: "5.25em",
    },
  },
  components: {
    MuiLink: {
      styleOverrides: {
        root: {
          textDecoration: "none",
          ":hover": {
            textDecoration: "underline",
          },
        },
      },
    },
  },
});

export default theme;