import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      aria: {
        invalid: 'invalid="true"',
      },
      fontFamily: {
        telefonica: ["var(--font-telefonica)"],
      },
      colors: {
        "light-blue": "#019DF4",
        blue: "#0185F0",
        "dark-blue": "#0B2739",
        shark: "#313235",
        "light-gray": "#F5F5F5",
        alto: "#D6D6D6",
        "dark-gray": "#86888C",
        "alice-blue": "#F0F9FF",
      },
      screens: {
        xs: { raw: "(max-width: 360px)" },
        "2k": { raw: "(min-height: 1080px)" },
        "not-touch": { raw: "(pointer: fine)" },
        desktop: { raw: "(min-width:1440px)" },
        "big-desktop": { raw: "(min-width:1600px)" },
      },
      animation: {
        preloader1: "preloader1 0.6s infinite",
        preloader2: "preloader2 0.6s infinite",
        preloader3: "preloader3 0.6s infinite",
        arrow: "arrow 1s infinite",
      },
      keyframes: {
        preloader1: {
          "0%": {
            transform: "scale(0)",
          },
          "100%": {
            transform: "scale(1)",
          },
        },
        preloader3: {
          "0%": {
            transform: "scale(1)",
          },
          "100%": {
            transform: "scale(0)",
          },
        },
        preloader2: {
          "0%": {
            transform: "translate(0, 0)",
          },
          "100%": {
            transform: "translate(1.5rem, 0)",
          },
        },
        arrow: {
          "0%": {
            transform: "translateX(0.3125rem)",
          },
          "50%": {
            transform: "translateX(0.5rem)",
          },
          "100%": {
            transform: "translateX(0.3125rem)",
          },
        },
      },
    },
  },
  plugins: [],
};
export default config;