/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./templates/**/*.{html,twig,js,scss}', './assets/**/*.{html,twig,js,scss}'],
    theme: {
        colors: {
            transparent: 'transparent',
            white: 'var(--white)',
            black: 'var(--black)',
            gray: 'var(--gray)',
            lightGray: 'var(--lightGray)',
            red: 'var(--red)',
            darkred: 'var(--darkred)',
            outline: 'var(--outline)',
        },
        spacing: {
            '0': '0',
            '0-25': '0.25rem',
            '0-5': '0.5rem',
            '0-75': '0.75rem',
            '1-25': '1.25rem',
            '1-5': '1.5rem',
            '1-75': '1.75rem',
            '1': '1rem',
            '2': '2rem',
            '3': '3rem',
            '4': '4rem',
            '5': '5rem',
            '6': '6rem',
            '7': '7rem',
            '8': '8rem',
            '9': '9rem',
            '10': '10rem',
        },
        // breakpoint definitions
        screens: {
            xxs: "420px",
            xs: "576px",
            sm: "768px",
            md: "992px",
            lg: "1200px",
            xl: "1370px",
            xxl: "1570px",
        },
        extend: {
            container: {
                center: true,
                padding: 'var(--container-padding)'
            },
        }
    },
    plugins: [],
}