// // /** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: ["class", '[data-theme="dark"]'],
    content: [
      './pages/**/*.{js,ts,jsx,tsx,mdx}',
      './components/**/*.{js,ts,jsx,tsx,mdx}',
      './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      container: {
        center: true,
        padding: "1.5rem",
        screens: {
          "2xl": "1400px",
        },
      },
      extend: {
        colors: {
          background: "var(--background)",
          foreground: "var(--foreground)",
          primary: {
            DEFAULT: "var(--primary)",
            dark: "var(--primary-dark)",
          },
          secondary: "var(--secondary)",
          accent: "var(--accent)",
          card: "var(--card)",
          "card-foreground": "var(--card-foreground)",
          border: "var(--border)",
          ring: "var(--ring)",
          muted: "var(--muted)",
          "muted-foreground": "var(--muted-foreground)",
        },
        keyframes: {
          "animate-in": {
            "0%": { opacity: 0, transform: "translateY(10px)" },
            "100%": { opacity: 1, transform: "translateY(0)" },
          },
          "animate-out": {
            "0%": { opacity: 1, transform: "translateY(0)" },
            "100%": { opacity: 0, transform: "translateY(10px)" },
          },
          shake: {
            '0%, 100%': { transform: 'translateX(0)' },
            '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-2px)' },
            '20%, 40%, 60%, 80%': { transform: 'translateX(2px)' },
          },
          "slide-in-from-top": {
            "0%": { transform: "translateY(-5%)" },
            "100%": { transform: "translateY(0)" },
          },
          "slide-in-from-bottom": {
            "0%": { transform: "translateY(5%)" },
            "100%": { transform: "translateY(0)" },
          },
          "fade-in": {
            "0%": { opacity: 0 },
            "100%": { opacity: 1 },
          },
        },
        animation: {
          "animate-in": "animate-in 0.3s ease-out",
          "animate-out": "animate-out 0.3s ease-in",
          shake: 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both',
          "slide-in-from-top": "slide-in-from-top 0.3s ease-out, fade-in 0.3s ease-out",
          "slide-in-from-bottom": "slide-in-from-bottom 0.3s ease-out, fade-in 0.3s ease-out",
          "fade-in": "fade-in 0.3s ease-out",
        },
      },
    },
    plugins: [
      // Plugin pour les animations
      function ({ addUtilities, matchUtilities, theme }) {
        addUtilities({
          ".animate-in": {
            animationName: "animate-in",
            animationDuration: "0.3s",
            animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
            animationFillMode: "forwards",
          },
        });
        
        matchUtilities(
          {
            "fade-in": (value) => ({
              opacity: 0,
              animation: `fade-in ${value} ease-out forwards`,
            }),
          },
          { values: theme("transitionDuration") }
        );
        
        matchUtilities(
          {
            "slide-in-from-top": (value) => ({
              transform: "translateY(-5%)",
              animation: `slide-in-from-top ${value} ease-out forwards, fade-in ${value} ease-out forwards`,
            }),
          },
          { values: theme("transitionDuration") }
        );
        
        matchUtilities(
          {
            "slide-in-from-bottom": (value) => ({
              transform: "translateY(5%)",
              animation: `slide-in-from-bottom ${value} ease-out forwards, fade-in ${value} ease-out forwards`,
            }),
          },
          { values: theme("transitionDuration") }
        );
        
        matchUtilities(
          {
            delay: (value) => ({
              animationDelay: value,
            }),
          },
          { values: theme("transitionDelay") }
        );
      },
    ],
  };