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

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        "primary-light": "#F7F8FC",
        "secondary-light": "#FFFFFF",
        "ternary-light": "#f6f7f8",

        "primary-dark": "#0D2438",
        "secondary-dark": "#102D44",
        "ternary-dark": "#254566",

        "accent-light": "",
        "accent-dark": "",

        "background-light": "#FFFFFF",
        "background-dark": "#070707",

        "accent": "#9d9d9d"
      },
      container: {
        padding: {
          DEFAULT: "1rem",
          sm: "2rem",
          lg: "5rem",
          xl: "6rem",
          "2xl": "8rem",
        },
      },
      animation: {
        'slide-up': 'slide-up .8s ease-in-out forwards',
        'slide-down-fast': 'slide-down .4s ease-in-out forwards',
        'rotate-pulse': 'rotate_pulse 8s linear infinite alternate',
      },
      keyframes: {
        'slide-up': {
          '0%': { transform: 'translate3d(0px, 50px, 0px)', opacity: 0 },
          '100%': { transform: 'translate3d(0px, 0px, 0px)', opacity: 1 },
        },
        'slide-down': {
          '0%': { transform: 'translate3d(0px, -50px, 0px)', opacity: 0 },
          '100%': { transform: 'translate3d(0px, 0px, 0px)', opacity: 1 },
        },
        rotate_pulse: {
          '0%': { transform: 'rotate3d(0, 0, 1, 360deg)', opacity: 0.8 },
          '100%': { transform: 'rotate3d(0, 0, 1, 180deg)', opacity: 1 },
        },
      },
    },
  },
  variants: {
    extend: {
      opacity: ["disabled"],
    },
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require("@tailwindcss/forms"),
  ],
};