/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            colors: {
                dark: {
                    900: '#0A0A0A',
                    800: '#111111',
                    700: '#1A1A1A',
                    600: '#222222',
                    500: '#2A2A2A',
                    400: '#333333',
                    300: '#444444',
                },
                gold: {
                    100: '#FFF8E1',
                    200: '#FFECB3',
                    300: '#FFD54F',
                    400: '#E8C547',
                    500: '#D4AF37',
                    600: '#C49B30',
                    700: '#A67C29',
                    800: '#8B6914',
                    900: '#6B4F10',
                },
                light: {
                    100: '#FFFFFF',
                    200: '#FAFAFA',
                    300: '#F5F5F5',
                    400: '#E0E0E0',
                    500: '#BDBDBD',
                },
            },
            fontFamily: {
                display: ['Playfair Display', 'Georgia', 'serif'],
                body: ['Montserrat', 'Helvetica', 'Arial', 'sans-serif'],
            },
            backgroundImage: {
                'gold-gradient': 'linear-gradient(135deg, #D4AF37 0%, #F5E290 50%, #D4AF37 100%)',
                'dark-gradient': 'linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%)',
                'hero-gradient': 'linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(10,10,10,0.95) 50%, rgba(212,175,55,0.05) 100%)',
                'card-gradient': 'linear-gradient(145deg, rgba(42,42,42,0.6) 0%, rgba(17,17,17,0.8) 100%)',
            },
            boxShadow: {
                'gold': '0 0 20px rgba(212, 175, 55, 0.15)',
                'gold-lg': '0 0 40px rgba(212, 175, 55, 0.2)',
                'gold-glow': '0 0 60px rgba(212, 175, 55, 0.3)',
                'card': '0 8px 32px rgba(0, 0, 0, 0.4)',
                'card-hover': '0 16px 48px rgba(0, 0, 0, 0.6)',
            },
            animation: {
                'fade-in': 'fadeIn 0.6s ease-out forwards',
                'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
                'fade-in-down': 'fadeInDown 0.8s ease-out forwards',
                'slide-in-left': 'slideInLeft 0.8s ease-out forwards',
                'slide-in-right': 'slideInRight 0.8s ease-out forwards',
                'gold-shimmer': 'goldShimmer 3s ease-in-out infinite',
                'pulse-gold': 'pulseGold 2s ease-in-out infinite',
                'float': 'float 6s ease-in-out infinite',
            },
            keyframes: {
                fadeIn: {
                    '0%': { opacity: '0' },
                    '100%': { opacity: '1' },
                },
                fadeInUp: {
                    '0%': { opacity: '0', transform: 'translateY(30px)' },
                    '100%': { opacity: '1', transform: 'translateY(0)' },
                },
                fadeInDown: {
                    '0%': { opacity: '0', transform: 'translateY(-30px)' },
                    '100%': { opacity: '1', transform: 'translateY(0)' },
                },
                slideInLeft: {
                    '0%': { opacity: '0', transform: 'translateX(-50px)' },
                    '100%': { opacity: '1', transform: 'translateX(0)' },
                },
                slideInRight: {
                    '0%': { opacity: '0', transform: 'translateX(50px)' },
                    '100%': { opacity: '1', transform: 'translateX(0)' },
                },
                goldShimmer: {
                    '0%, 100%': { backgroundPosition: '200% center' },
                    '50%': { backgroundPosition: '-200% center' },
                },
                pulseGold: {
                    '0%, 100%': { boxShadow: '0 0 20px rgba(212, 175, 55, 0.15)' },
                    '50%': { boxShadow: '0 0 40px rgba(212, 175, 55, 0.35)' },
                },
                float: {
                    '0%, 100%': { transform: 'translateY(0)' },
                    '50%': { transform: 'translateY(-10px)' },
                },
            },
        },
    },
    plugins: [],
};