const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          500: "#202948",
          300: "#8097B8",
          100: "#F2F8FF",
        },
        secondary: {
          500: "#CCA93F",
          300: "#C4B074",
        },
        tertiary: {
          400: colors.stone[400],
          300: colors.stone[300],
        },
      },
      fontFamily: {
        abel: ["Abel", "sans-serif"],
        cormorant: ["Cormorant", "serif"],
        frankRuhl: ["Frank Ruhl Libre", "serif"],
      },
      screens: {
        lg: "1100px",
        md: "900px",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        fadeOut: {
          "0%": { opacity: "1" },
          "100%": { opacity: "0" },
        },
      },
      animation: {
        fadeIn: "fadeIn 75ms ease-in",
        fadeOut: "fadeOut 500ms ease-out",
      },
    },
  },
  plugins: [],
  future: {
    hoverOnlyWhenSupported: true,
  },
};