/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
const safelistLoader = require('./safelist-loader');
const safelist = safelistLoader('packages/base/Configuration/Ext/Form/Yaml/Setup.yaml');

const isProduction = process.env.NODE_ENV === 'production';

const config = {
  // Keep content defined always, but rely on safelist in dev
  content: [
    "./packages/base/Configuration/**/*.yaml",
    "./packages/base/Resources/Private/**/*.html",
    "./packages/base/Resources/Private/**/*.js",
    "./packages/base/ContentBlocks/ContentElements/**/*.html",
    "./public/typo3conf/ext/*/Resources/Private/**/*.html",
  ],
  // Disable purging in dev by safelisting everything
  safelist: isProduction ? [
    ...safelist,
  ] : [
    'md:col-span-6',
    { 
      pattern: /col-span-\d+/,
      variants: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] // Include other variants (sm, lg) if needed
    },
    { pattern: /.*/ }
  ],
  theme: {
    extend: {
      transitionProperty: {
        'max-height': 'max-height' // Add max-height to transition properties
      },
      fontFamily: {

        barlow: ['"Barlow"', ...defaultTheme.fontFamily.sans],
      },
      // borderColor: {
      //   primary: 'var(--color-primary)',
      // },
      colors: {
        primary: 'var(--color-primary)',
        yellow: '#F5AE07',
        'light-green': '#F4F6EC',
        brand: '#6B8E23', // Added brand color for hover states from SCSS
      },
      backgroundImage: {
        'hero-gradient':
          'linear-gradient(to right, #0B197D 0%, #0B197D 50%, #ffffff 50%, #ffffff 100%)',
        'hero-inner':
          'linear-gradient(to right, #0B197D 0%, #0B197D 25%, #ffffff 25%, #ffffff 100%)',
      },
      maxHeight: {
        '0': '0',
        '[500px]': '500px', // Add specific max-height for mobile menu transition
      }
    },
  },
  plugins: [],
};

module.exports = config;