/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./**/*.{js,ts,jsx,tsx}",
        "./*.{js,ts,jsx,tsx,html,css}"
    ],
    darkMode: 'media',
    theme: {
        extend: {
            colors: {
                // Figma Brand colors
                'Brand-Orange': 'var(--Brand-Orange)',

                // Figma Neutral colors
                'Neutrals-NeutralSlate0': 'var(--Neutrals-NeutralSlate0)',
                'Neutrals-NeutralSlate50': 'var(--Neutrals-NeutralSlate50)',
                'Neutrals-NeutralSlate100': 'var(--Neutrals-NeutralSlate100)',
                'Neutrals-NeutralSlate200': 'var(--Neutrals-NeutralSlate200)',
                'Neutrals-NeutralSlate300': 'var(--Neutrals-NeutralSlate300)',
                'Neutrals-NeutralSlate400': 'var(--Neutrals-NeutralSlate400)',
                'Neutrals-NeutralSlate500': 'var(--Neutrals-NeutralSlate500)',
                'Neutrals-NeutralSlate600': 'var(--Neutrals-NeutralSlate600)',
                'Neutrals-NeutralSlate700': 'var(--Neutrals-NeutralSlate700)',
                'Neutrals-NeutralSlate800': 'var(--Neutrals-NeutralSlate800)',
                'Neutrals-NeutralSlate900': 'var(--Neutrals-NeutralSlate900)',
                'Neutrals-NeutralSlate950': 'var(--Neutrals-NeutralSlate950)',
                'Text-White-00': 'var(--Text-White-00)',
                'Text-Gray-100': 'var(--Text-Gray-100)',
                'Text-Gray-200': 'var(--Text-Gray-200)',
                'Text-Gray-300': 'var(--Text-Gray-300)',
                'Text-Gray-400': 'var(--Text-Gray-400)',
                'Text-Gray-500': 'var(--Text-Gray-500)',
                'Text-Gray-600': 'var(--Text-Gray-600)',
                'Text-Gray-700': 'var(--Text-Gray-700)',
                'Text-Gray-800': 'var(--Text-Gray-800)',
                'Text-Dark-950': 'var(--Text-Dark-950)',
                'Outline-Outline-Gray-200': 'var(--Outline-Outline-Gray-200)',
                'Button-Secondary': 'var(--Button-Secondary)',
                'red-200': 'var(--red-200)',

                // Figma Other colors
                'Other-White': 'var(--Other-White)',
                'Other-Red': 'var(--Other-Red)',
                'Other-Green': 'var(--Other-Green)',

                // Legacy brand colors (keep for compatibility)
                brand: {
                    main: 'var(--Brand-Orange)',
                },
                // Legacy Neutral Light colors (keep for compatibility)
                gray: {
                    1: '#A4A7AE',
                    2: '#D5D7DA',
                    3: '#E9EAEB',
                    4: '#F5F5F5',
                    5: '#FAFAFA',
                    6: '#FDFDFD',
                },
                // Legacy Neutral Dark colors (keep for compatibility)
                dark: {
                    1: '#A4A7AE',
                    2: '#717680',
                    3: '#535862',
                    4: '#414651',
                    5: '#252B37',
                    6: '#181D27',
                    7: '#0A0D12',
                },
                // Legacy Status colors (keep for compatibility)
                status: {
                    red: '#F63D68',
                    green: '#3CCB7F',
                    orange: '#FF6B35',
                    'orange-light': '#F38744',
                    yellow: '#FEEE95',
                },
                // Legacy Base colors (keep for compatibility)
                base: {
                    white: '#FFFFFF',
                },
            },
            fontFamily: {
                'inter': ['Inter', 'sans-serif'],
                'neue-montreal': ['Neue Montreal', 'Inter', 'sans-serif'],
            },
        },
    },
    plugins: [],
}