const sharedConfig = require('../../tailwind.config.shared.js')

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...sharedConfig,
  darkMode: 'class', // Habilitar dark mode con clase 'dark'
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    // Scan shared components and utilities in the monorepo (fix: was ../shared-components which is not present)
    '../../shared/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    ...sharedConfig.theme,
    extend: {
      ...sharedConfig.theme.extend,
      fontFamily: {
        sans: ['Manrope', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
      },
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            '--tw-prose-invert-headings': theme('colors.white.dark || white'),
            '--tw-prose-invert-links': theme('colors.white.dark || white'),
            h1: { fontSize: '2.5rem', marginBottom: '0.5rem', marginTop: 0 },
            h2: { fontSize: '2rem', marginBottom: '0.5rem', marginTop: 0 },
            h3: { fontSize: '1.75rem', marginBottom: '0.5rem', marginTop: 0 },
            h4: { fontSize: '1.5rem', marginBottom: '0.5rem', marginTop: 0 },
            h5: { fontSize: '1.25rem', marginBottom: '0.5rem', marginTop: 0 },
            h6: { fontSize: '1rem', marginBottom: '0.5rem', marginTop: 0 },
            p: { marginBottom: '0.5rem' },
            li: { margin: 0 },
            img: { margin: 0 },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/forms')({ strategy: 'class' }),
    require('@tailwindcss/typography'),
  ],
}