module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: "media", // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        nerd: ["DejaVuSansMono"],
      },
      colors: {
        "werefox-blue": {
          light: "#94C2FF",
          DEFAULT: "#75B1FF",
          dark: "#0052B8",
          darker: "#00377A",
          darkest: "#00326B",
        },
        "werefox-pink": {
          DEFAULT: "#FF84CA",
          dark: "#9E0054",
          darker: "#8A0040",
          darkest: "#75003F",
        },
        "werefox-grey": {
          lightest: "#EEE",
          lighter: "#DBDBDB",
          light: "#CCC",
          DEFAULT: "#424242",
          dark: "#242424",
          darker: "#121212",
        },
      },
      flex: {
        5: "5 5 0%",
      },
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-1deg)" },
          "50%": { transform: "rotate(1deg)" },
        },
        jiggle: {
          "0%, 100%": { transform: "rotate(0deg)" },
          "25%": { transform: "rotate(-10deg)" },
          "75%": { transform: "rotate(10deg)" },
        },
        yip: {
          "0%, 100%": { transform: "scale(1, 1)" },
          "50%": { transform: "scale(1.01, 1.01)" },
        },
      },
      animation: {
        wiggle: "wiggle 7s ease-in-out infinite",
        jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
        yip: "yip 0.1s ease-in-out",
      },
    },
  },
  variants: {
    extend: {
      brightness: ["hover", "dark"],
      ringColor: ["hover", "dark", "active"],
      animation: ["hover", "focus"],
    },
  },
  plugins: [],
};