/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./templates/**/*.html', './content/**/*.md'],
  safelist: [
    {
      pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
      variants: [
        'sm', 'md', 'lg', 
        'first', 'first:sm', 'first:md', 'first:lg', 
        'last', 'last:sm', 'last:md', 'last:lg'
      ],
    },
    {
      pattern: /(pt|pb)-(0)/,
      variants: [
        '!', 'lg', 
        'first', 'first:sm', 'first:md', 'first:lg', 
        'last', 'last:sm', 'last:md', 'last:lg'
      ],
    },
    {
      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
    }
  ],
  theme: {
    extend: {
      colors: {
        teal: {
          50: '#E0F2F1',
          100: '#B2DFDB',
          200: '#80CBC4',
          300: '#4DB6AC',
          400: '#26A69A',
          500: '#009688',
          600: '#00897B',
          700: '#00796B',
          800: '#00695C',
          900: '#004D40',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    }, // End of extend
  }, // **Added closing brace for theme here**
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
};