import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './node_modules/flowbite/**/*.js',
    ],

    /*
     * Safelist: dynamic color classes used in registration partials
     * (password-fields.blade.php, bottom-nav.blade.php) via $color variable.
     * Add new color names here when introducing new registration pages.
     */
    safelist: [
        // Table zebra striping — used in JS template literals (not detectable by Tailwind scanner)
        'odd:bg-white', 'even:bg-gray-50',
        'hover:bg-indigo-50/60', 'hover:bg-blue-50/60',
        'border-b', 'border-gray-100', 'last:border-0',
        // green — member, trainee, contributor (legacy)
        'focus:ring-green-500', 'focus:border-green-500',
        'bg-green-600', 'hover:bg-green-700',
        'text-green-600', 'hover:text-green-700',
        // violet — contributor
        'focus:ring-violet-500', 'focus:border-violet-500',
        'bg-violet-600', 'hover:bg-violet-700',
        'text-violet-600', 'hover:text-violet-700',
        // blue — trainee / other roles
        'focus:ring-blue-500', 'focus:border-blue-500',
        'bg-blue-600', 'hover:bg-blue-700',
        'text-blue-600', 'hover:text-blue-700',
        // purple — mentor
        'focus:ring-purple-500', 'focus:border-purple-500',
        'bg-purple-600', 'hover:bg-purple-700',
        'text-purple-600', 'hover:text-purple-700',
        // amber — health marketor
        'focus:ring-amber-500', 'focus:border-amber-500',
        'bg-amber-600', 'hover:bg-amber-700',
        'text-amber-600', 'hover:text-amber-700',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
                'theme-body': 'var(--theme-font-body)',
                'theme-heading': 'var(--theme-font-heading)',
            },
            colors: {
                'theme-primary': 'var(--theme-primary)',
                'theme-secondary': 'var(--theme-secondary)',
                'theme-accent': 'var(--theme-accent)',
                'theme-body': 'var(--theme-color-body)',
                'theme-heading': 'var(--theme-color-heading)',
                'theme-link': 'var(--theme-color-link)',
            },
            backgroundColor: {
                'theme-body': 'var(--theme-bg-body)',
                'theme-card': 'var(--theme-bg-card)',
                'theme-sidebar': 'var(--theme-bg-sidebar)',
                'theme-header': 'var(--theme-bg-header)',
                'theme-footer': 'var(--theme-bg-footer)',
            },
            borderColor: {
                'theme-divider': 'var(--theme-divider-color)',
            },
            keyframes: {
                marquee: {
                    '0%': { transform: 'translateX(0)' },
                    '100%': { transform: 'translateX(-50%)' },
                },
                'fade-in-up': {
                    '0%': { opacity: '0', transform: 'translateY(20px)' },
                    '100%': { opacity: '1', transform: 'translateY(0)' },
                },
                'flip-y': {
                    '0%': { transform: 'rotateY(0deg)' },
                    '100%': { transform: 'rotateY(180deg)' },
                },
            },
            animation: {
                marquee: 'marquee 30s linear infinite',
                'fade-in-up': 'fade-in-up 0.6s ease-out forwards',
            },
        },
    },

    plugins: [
        forms,
        require('flowbite/plugin')
    ],
};
