/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: 'class',
    theme: {
        extend: {
            keyframes: {
                'zoom-in': {
                    '0%': { opacity: '0', transform: 'scale(0.95)' },
                    '100%': { opacity: '1', transform: 'scale(1)' },
                }
            },
            animation: {
                'zoom-in': 'zoom-in 0.3s ease-out forwards',
            },
            colors: {
                primary: {
                    50: 'hsl(var(--primary-50) / <alpha-value>)',
                    100: 'hsl(var(--primary-100) / <alpha-value>)',
                    200: 'hsl(var(--primary-200) / <alpha-value>)',
                    300: 'hsl(var(--primary-300) / <alpha-value>)',
                    400: 'hsl(var(--primary-400) / <alpha-value>)',
                    500: 'hsl(var(--primary-500) / <alpha-value>)',
                    600: 'hsl(var(--primary-600) / <alpha-value>)',
                    700: 'hsl(var(--primary-700) / <alpha-value>)',
                    800: 'hsl(var(--primary-800) / <alpha-value>)',
                    900: 'hsl(var(--primary-900) / <alpha-value>)',
                    950: 'hsl(var(--primary-950) / <alpha-value>)',
                }
            }
        },
    },
    plugins: [],
}