/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.vue'],
    theme: {
        extend: {
            colors: {
                gray: {
                    100: '#f7fafc',
                    200: '#edf2f7',
                    300: '#e2e8f0',
                    400: '#cbd5e0',
                    500: '#a0aec0',
                    600: '#718096',
                    700: '#4a5568',
                    800: '#2d3748',
                    900: '#1a202c',
                },
                edit: {
                    DEFAULT: 'hsl(20, 77%, 55%)',
                },
                primary: {
                    DEFAULT: 'var(--primary)',
                },
                primaryfg: {
                    DEFAULT: 'var(--primaryfg)',
                },
                secondary: {
                    DEFAULT: 'var(--secondary)',
                },
                font: {
                    DEFAULT: 'var(--font)',
                },
                circle: {
                    DEFAULT: 'var(--circle)',
                },
            },
            fontFamily: {
                arvo: ['Arvo'],
                nunito: ['Nunito'],
            },
            boxShadow: {
                button: 'inset 0 -2px 0 rgba(255,255,255,0.2)',
            },
        },
    },
    plugins: [require('@tailwindcss/container-queries'), require('@tailwindcss/typography')],
};