import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      },
      screens: {
        // Default Tailwind breakpoints:
        // sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
        // Extended breakpoints for large screens:
        '3xl': '1920px', // Full HD monitors
        '4xl': '2560px', // QHD / 4K monitors
      },
      maxWidth: {
        // Extended container widths for large screens
        '8xl': '88rem',   // 1408px
        '9xl': '96rem',   // 1536px
        '10xl': '112rem', // 1792px - for 4K
      },
    },
  },
  plugins: [],
};

export default config;