/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.tsx', './app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
      container: {
          center: true,
      },
      extend: {
        // main colors
        colors: {
            primary: {
                DEFAULT: '#fff',
                light: '#fff',
                dark: '#1D1D1D',
            },
            secondary: {
                DEFAULT: '#7A0C00',
                light: '#B90000',
                dark: '#000000',
            },
            text: {
                DEFAULT: '#000',
                light: '#fff',
                dark: '#fff'
            },
            success: {
                DEFAULT: '#38C172',
                light: '#38C172',
                dark: '#38C172',
            },
            error: {
                DEFAULT: '#E3342F',
                light: '#E3342F',
                dark: '#E3342F',
            },
            warning: {
                DEFAULT: '#FFA800',
                light: '#FFED4A',
                'dark-light': '#FFED4A',
            },
            info: {
                DEFAULT: '#026af2',
                light: '#026af2',
                dark: '#026af2',
            },
        },
          fontFamily: {
              nunito: ['Tajawal', 'sans-serif'],
          },
          spacing: {
              4.5: '18px',
          },
          boxShadow: {
              '3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
          },
          typography: ({ theme }) => ({
              DEFAULT: {
                  css: {
                      '--tw-prose-invert-headings': theme('colors.white.dark'),
                      '--tw-prose-invert-links': theme('colors.white.dark'),
                      h1: { fontSize: '40px', marginBottom: '0.5rem', marginTop: 0 },
                      h2: { fontSize: '32px', marginBottom: '0.5rem', marginTop: 0 },
                      h3: { fontSize: '28px', marginBottom: '0.5rem', marginTop: 0 },
                      h4: { fontSize: '24px', marginBottom: '0.5rem', marginTop: 0 },
                      h5: { fontSize: '20px', marginBottom: '0.5rem', marginTop: 0 },
                      h6: { fontSize: '16px', marginBottom: '0.5rem', marginTop: 0 },
                      p: { marginBottom: '0.5rem' },
                      li: { margin: 0 },
                      img: { margin: 0 },
                  },
              },
          }),
      },
  },
  plugins: [
      require('@tailwindcss/forms')({
          strategy: 'class',
      }),
      require('@tailwindcss/typography'),
      require('@tailwindcss/line-clamp'),
  ],
};