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: {
      dropShadow: {
        light: [
          "0 1px 2px rgba(242, 248, 255, 0.2)",
          "0 1px 1px rgba(242, 248, 255, 0.15)",
        ],
        "blue-md": [
          "0 4px 3px rgba(169, 184, 204, 0.07)",
          "0 2px 2px rgba(169, 184, 204, 0.06)",
        ],
        "blue-xl": [
          "0 20px 13px rgba(169, 184, 204, 0.03)",
          "0 8px 5px rgba(169, 184, 204, 0.08)",
        ],
      },
      colors: {
        primary: {
          500: "#202948",
          300: "#A9B8CC",
          100: "#F2F8FF",
        },
        secondary: {
          500: "#CCA93F",
          300: "#E0D2A6",
        },
        tertiary: {
          400: colors.stone[400],
          300: colors.stone[300],
        },
      },
      fontFamily: {
        abel: ["Abel", "sans-serif"],
        cormorant: ["Cormorant", "serif"],
      },
      screens: {
        lg: "1200px",
        md: "975px",
      },
      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",
      },
      boxShadow: {
        superPortraitR: "75px 75px 250px 0px",
        superPortraitL: "-75px 75px 250px 0px",
      },
      content: {
        textAccent: "url('/content/text_accent.png')",
        textAccent2: "url('/content/text_accent_2.png')",
        quote: "url('/content/quote.png')",
        textAccent3: "url('/content/text_accent_3.png')",
        textAccent4: "url('/content/text_accent_4.png')",
      },
    },
  },
  plugins: [],

  future: {
    hoverOnlyWhenSupported: true,
  },
};