/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                kodo: {
                    void: 'rgb(var(--kodo-void) / <alpha-value>)',
                    ink: 'rgb(var(--kodo-ink) / <alpha-value>)',
                    graphite: 'rgb(var(--kodo-graphite) / <alpha-value>)',
                    slate: 'rgb(var(--kodo-slate) / <alpha-value>)',
                    steel: 'rgb(var(--kodo-steel) / <alpha-value>)',
                    cyan: 'rgb(var(--kodo-cyan) / <alpha-value>)',
                    'cyan-dim': 'rgb(var(--kodo-cyan-dim) / <alpha-value>)',
                    magenta: 'rgb(var(--kodo-magenta) / <alpha-value>)',
                    lime: 'rgb(var(--kodo-lime) / <alpha-value>)',
                    orange: 'rgb(var(--kodo-orange) / <alpha-value>)',
                    gold: 'rgb(var(--kodo-gold) / <alpha-value>)',
                    red: 'rgb(var(--kodo-red) / <alpha-value>)',
                    primary: 'rgb(var(--kodo-content-highlight) / <alpha-value>)',
                    secondary: 'rgb(var(--kodo-content-dim) / <alpha-value>)',
                },
            },
            fontFamily: {
                display: ['Space Grotesk', 'sans-serif'],
                heading: ['Space Grotesk', 'sans-serif'],
                body: ['Inter', 'sans-serif'],
                mono: ['JetBrains Mono', 'monospace'],
            },
            backgroundImage: {
                'gradient-neon': 'linear-gradient(135deg, rgb(var(--kodo-cyan-dim)) 0%, rgb(var(--kodo-cyan)) 100%)',
                'gradient-gaming': 'linear-gradient(135deg, rgb(var(--kodo-graphite)) 0%, rgb(var(--kodo-ink)) 100%)',
                'gradient-cyber': 'linear-gradient(135deg, rgba(var(--kodo-cyan), 0.1) 0%, rgba(var(--kodo-magenta), 0.1) 100%)',
            },
            boxShadow: {
                'neon-cyan': '0 0 20px rgba(var(--kodo-cyan), 0.15)',
                'neon-magenta': '0 0 20px rgba(var(--kodo-magenta), 0.15)',
                gaming: '0 10px 30px -10px rgba(0,0,0,0.5)',
                glass: '0 8px 32px 0 rgba(0, 0, 0, 0.36)',
            },
            borderRadius: {
                xl: '12px',
                '2xl': '16px',
                '3xl': '24px',
            },
        },
    },
    plugins: [],
};