/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/**/*.js"
  ],
  darkMode: 'class',
  theme: {
    extend: {
      container: {
        center: true,
        padding: {
          DEFAULT: '1rem',
          sm: '1.5rem',
          lg: '2rem',
          xl: '3rem',
          '2xl': '4rem',
        },
      },
      screens: {
        'xs': '480px',
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
        '128': '32rem',
      },
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
        '5xl': ['3rem', { lineHeight: '1' }],
      },
      colors: {
        'mercedes': {
          'black': '#000000',
          'silver': '#C0C0C0',
          'dark-gray': '#1a1a1a',
          'light-gray': '#f5f5f5',
        },
        'dark': {
          'bg': '#0f172a',
          'bg-secondary': '#131c2e',
          'surface': '#1e293b',
          'text': '#f8fafc',
          'text-secondary': '#e2e8f0',
          'border': '#334155',
        },
        'light': {
          'bg': '#ffffff',
          'bg-secondary': '#f8fafc',
          'surface': '#f7fafc',
          'text': '#1a202c',
          'text-secondary': '#2d3748',
          'border': '#e2e8f0',
        },
        'status': {
          'online': '#10b981',
          'offline': '#ef4444',
          'warning': '#f59e0b',
          'info': '#3b82f6',
        },
      },
      boxShadow: {
        'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'card-dark': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
      },
      borderRadius: {
        'none': '0',
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'xl': '0.75rem',
        '2xl': '1rem',
        '3xl': '1.5rem',
        'full': '9999px',
      },
      // Keine Animationen definiert
      animation: {
        'none': 'none',
      },
      keyframes: {},
    },
  },
  plugins: [],
  // Optimierungen für Production Build
  future: {
    hoverOnlyWhenSupported: true,
  },
  experimental: {
    optimizeUniversalDefaults: true,
  },
}