/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // or 'media' or 'class'
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        ubuntu: ["ubuntu", "sans-serif"],
      },
      backgroundColor: ['dark'],
      textColor: ['dark'],
      boxShadow: {
        oauthBtn:
          'inset -2px -2px 8px 0px rgba(0, 0, 0, 0.25), 2px 2px 8px 0px rgba(0, 0, 0, 0.25)',
      },
      backgroundImage: {
        auth: 'url("./assets/images/bg.avif")',
      },
      // Conteneurs max-width
      maxWidth: {
        'container': '1280px',
        'content': '896px',
      },

      // Espacements personnalisés
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      },

      // Couleurs de la marque
      colors: {
        primary: {
          50: '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1', // Indigo principal
          600: '#4f46e5',
          700: '#4338ca',
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b',
        },
      },

      // Animations personnalisées
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'scale-in': 'scaleIn 0.2s ease-out',
      },

      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        scaleIn: {
          '0%': { transform: 'scale(0.95)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
      },

      // Typography
      fontSize: {
        'xxs': ['0.625rem', { lineHeight: '0.875rem' }],
      },

      // Transitions
      transitionProperty: {
        'height': 'height',
        'spacing': 'margin, padding',
      },
    },
  },
  plugins: [
    // Plugin pour line-clamp (limiter le nombre de lignes)
    require('@tailwindcss/line-clamp'),

    // Plugin pour les formulaires
    require('@tailwindcss/forms')({
      strategy: 'class', // Utilise la classe 'form-*' au lieu de styles globaux
    }),

    // Plugin pour l'aspect ratio
    require('@tailwindcss/aspect-ratio'),],
}