const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
const config = {
    content: ['./{app,stories}/**/*.{ts,tsx,jsx,js}'],
    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            white: '#ffffff',
            black: '#000000',
            grey: {
                25: '#FCFCFC',
                50: '#FAFAFA',
                100: '#F4F4F5',
                200: '#E4E4E7',
                300: '#D1D1D6',
                400: '#A0A0AB',
                500: '#70707B',
                600: '#51525C',
                700: '#3F3F46',
                800: '#26272B',
                900: '#18181B',
            },
            error: {
                25: '#FFFBFA',
                50: '#FEF3F2',
                100: '#FEE4E2',
                200: '#FECDCA',
                300: '#FDA29B',
                400: '#F97066',
                500: '#F04438',
                600: '#D92D20',
                700: '#B42318',
                800: '#912018',
                900: '#7A271A',
            },
            success: {
                25: '#F6FEF9',
                50: '#ECFDF3',
                100: '#D1FADF',
                200: '#A6F4C5',
                300: '#6CE9A6',
                400: '#32D583',
                500: '#12B76A',
                600: '#039855',
                700: '#027A48',
                800: '#05603A',
                900: '#054F31',
            },
            warning: {
                25: '#FFFCF5',
                50: '#FFFAEB',
                100: '#FEF0C7',
                200: '#FEDF89',
                300: '#FEC84B',
                400: '#FDB022',
                500: '#F79009',
                600: '#DC6803',
                700: '#B54708',
                800: '#93370D',
                900: '#7A2E0E',
            },
            blue: {
                25: '#F5F8FF',
                50: '#EFF4FF',
                100: '#D1E0FF',
                200: '#B2CCFF',
                300: '#84ADFF',
                400: '#528BFF',
                500: '#2970FF',
                600: '#155EEF',
                700: '#004EEB',
                800: '#0040C1',
                900: '#00359E',
            },
            'blue-brand': '#3A65EB',
            'blue-dark': '#0E106D',
            'blue-light': '#C8D4FA',
            green: '#01A74D',
            'green-dark': '#102C22',
            'green-light': '#A2FFC1',
            brown: '#AA8544',
            'brown-dark': '#421400',
            'brown-light': '#FFE7BD',
            purple: '#37276A',
            'purple-dark': '#6B32E4',
            'purple-light': '#F7ECFF',
            red: '#CA2240',
            'red-dark': '#4C0000',
            'red-light': '#FFDFDB',
        },
        extend: {
            fontSize: {
                base: ['1rem', '1.375rem'], //line-height 22px instead of 24
                lg: ['1.125rem', '1.625rem'],
                '1.5lg': ['1.25rem', '1.625rem'],
                xl: ['1.375rem', '1.75rem'],
                '1.5xl': ['1.5rem', '1.75rem'],
                '2.5xl': ['1.625rem', '2rem'],
            },
            fontFamily: {
                sans: ['PolySans', ...defaultTheme.fontFamily.sans],
            },
            boxShadow: {
                xs: '0px 1px 2px rgba(16, 24, 40, 0.05)',
                sm: ['0px 2px 8px rgba(16, 24, 40, 0.1)', '0px 1px 2px rgba(16, 24, 40, 0.06)'],
                md: ['0px 12px 32px -2px rgba(16, 24, 40, 0.1)', '0px 3px 9px -2px rgba(16, 24, 40, 0.06)'],
                lg: ['0px 12px 32px -4px rgba(16, 24, 40, 0.08)', '0px 4px 22px -2px rgba(16, 24, 40, 0.03)'],
                xl: ['0px 28px 32px -4px rgba(16, 24, 40, 0.08)', '0px 10px 16px -4px rgba(16, 24, 40, 0.03)'],
                '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)',
                '3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)',
                //border do not work well on tbody element, so we mimic that with box-shadow
                tbody: ['0 0 0 1px #E4E4E7', '0px 2px 8px rgba(16, 24, 40, 0.1)', '0px 1px 2px rgba(16, 24, 40, 0.06)'],
            },
            gridTemplateColumns: {
                24: 'repeat(24, minmax(0, 1fr))',
            },
            maxWidth: {
                'page-size': '1520px',
            },
            borderRadius: {
                '1.5xl': '1.5rem',
            },
        },
    },
    plugins: [],
};

module.exports = config;