module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: "class", // or 'media' or 'class'
  theme: {
    backgroundColor: (theme) => ({
      ...theme("colors"),
      blueC0: "#196EC0",
      blueB0: "#517AB0",
      blue90: "#235A90",
      blueCB: "#98B2CB",
      blueEB: "#2B8DEB",
      blueFF: "#E8FCFF",
      blueFF1: "#E9F0FF",
      blueFD: "#F6F9FD",
      blueFD1 : "#F4F8FD",
      blueFFOP : "rgba(6, 146, 255, 0.36)",
      redFF: "#FFE6E6",
      redFF1: "#FF2020",
      yellow2: "#FDFFDA",
      yellow3: "#EFFF00",
      gray36: "#363636",
      orange1: "#FF6600",
      green1: "#00FF80",
      gray20: "#202020",
      gray2077: "#20202077",
      gray2C: "#2C2C2C",
      gray36: "#363636",
      gray50: "#505050",
      grayDB: "#DBDBDB",
      grayE3: "#E3E3E3",
      grayEE: "#EEEEEE",
      grayF9: "#F9F9F9",
      grayF4: "#EBF0F4",
    }),
    textColor: (theme) => ({
      ...theme("colors"),
      primary: "#235A90",
      blueC0: "#196EC0",
      blueC01: "#1999C0",
      blueE8: "#2E81E8",
      blue52: "#132F52",
      blue5F: "#05335F",
      blueB9: "#86A0B9",
      green71: "#067182",
      greenBA: "#06BACE",
      red5F: "#5F1A05",
      yellow1: "#5F5F05",
      gray1: "#333333",
      gray70: "#707070",
      grayDB: "#DBDBDB",
    }),
    borderColor: (theme) => ({
      ...theme("colors"),
      blueC0: "#196EC0",
      blueC01: "#1999C0",
      blueFE: "#C1E0FE",
      blueFF1: "#E9F0FF",
      blueB9: '#86A0B9',
      grayDB: "#DBDBDB",
      gray45: "#454545",

    }),
    fill: (theme) => ({
      ...theme("colors"),
      blueC0: "#196EC0",
      grayDF: "#DFDFDF",
      greenBA: "#06BACE",
    }),
    fontSize: {
      'xs': 'clamp(calc(100vw / 38), 8, 13)',
      'sm': '.875rem',
      'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
      'sm-1': '0.5rem'
    },
    extend: {
      borderRadius: {
        sm: "3px",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};