/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        Popins: ["'Poppins'", "sans-serif"],
        Inconsolata: ["'Inconsolata'", "sans-serif"],
      },
      colors: {
        primary: "#319AF6",
        headerBg: "#FFFFFF",
        sideNavBg: "#2A2D3E",
        tableBg: "white",
        tableHeaderBg: "#f1f5f9",
        cardBg: "#FFFFFF",

        // E-commerce colors
        ePrimary: "#4f46e5",
      },
      container: {
        center: true,
        padding: "1rem",
      },
      screens: {
        xxs: "375px",
        xs: "425px",
        sm: "576px",

        md: "769px",

        lg: "992px",

        xl: "1200px",

        "2xl": "1400px",
        "3xl": "1900px",
      },
      fontSize: {
        xxs: ".35rem",
      },
      keyframes: {
        'float-slow': {
          '0%, 100%': { 
            transform: 'translate(0, 0) rotate(0deg) scale(1)', 
          },
          '25%': { 
            transform: 'translate(10px, 20px) rotate(5deg) scale(0.95)', 
          },
          '50%': { 
            transform: 'translate(-15px, -10px) rotate(-5deg) scale(1.05)', 
          },
          '75%': { 
            transform: 'translate(5px, 15px) rotate(3deg) scale(0.98)', 
          },
        },
      },
      animation: {
        'float-slow': 'float-slow var(--animation-duration, 20s) ease-in-out infinite',
      },
    },
  },
  plugins: [],
};
