/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./static/**/*.js",
    "./static/css/input.css"
  ],
  darkMode: 'class',
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
        '128': '32rem'
      },
      colors: {
        // Mercedes-Benz Corporate Colors
        'mercedes': {
          'black': '#000000',
          'deep-black': '#000000', // Tiefes Schwarz für Dashboard-Style
          'silver': '#C0C0C0',
          'dark-gray': '#0a0a0a', // Sehr dunkles Grau für Kontrast
          'light-gray': '#f5f5f5',
          'platinum': '#E5E4E2',
          'charcoal': '#1a1a1a', // Für Rahmen und Grenzen
          'steel': '#71797E'
        },
        // Dashboard-kompatible Dark Mode Farben
        'dark': {
          'bg': '#000000',        // Tiefes Schwarz wie Dashboard
          'bg-secondary': '#0a0a0a', // Sehr dunkles Grau
          'surface': '#0f0f0f',   // Kartenhintergrund
          'surface-hover': '#1a1a1a', // Hover-Zustand
          'card': '#0f0f0f',      // Karten-Hintergrund
          'card-hover': '#1a1a1a', // Karten-Hover
          'text': '#ffffff',
          'text-secondary': '#e2e8f0',
          'text-muted': '#94a3b8',
          'text-disabled': '#64748b',
          'border': '#1a1a1a',    // Dunkle Rahmen
          'border-light': '#2a2a2a',
          'hover': '#1a1a1a',
          'focus': '#2a2a2a',
          'accent': '#ffffff'     // Weißer Akzent auf schwarzem Hintergrund
        },
        // Light Mode optimierte Farben
        'light': {
          'bg': '#ffffff',
          'bg-secondary': '#f8fafc',
          'surface': '#ffffff',
          'surface-hover': '#f8fafc',
          'card': '#ffffff',
          'card-hover': '#f7fafc',
          'text': '#0f172a',
          'text-secondary': '#334155',
          'text-muted': '#64748b',
          'text-disabled': '#a0aec0',
          'border': '#e2e8f0',
          'border-light': '#f1f5f9',
          'hover': '#f1f5f9',
          'focus': '#e2e8f0',
          'accent': '#000000'     // Schwarzer Akzent auf weißem Hintergrund
        },
        // Professional Theme Colors
        'professional': {
          'primary': '#000000',   // Mercedes Schwarz
          'secondary': '#ffffff', // Reines Weiß
          'accent': '#0ea5e9',   // Mercedes Blau Akzent
          'muted': '#64748b',
          'success': '#10b981',
          'warning': '#f59e0b',
          'error': '#ef4444'
        }
      },
      backgroundImage: {
        'gradient-professional': 'linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%)',
        'gradient-professional-light': 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)'
      },
      boxShadow: {
        'glass': '0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05)',
        'glass-dark': '0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
        'professional': '0 20px 40px rgba(0, 0, 0, 0.1)',
        'professional-dark': '0 20px 40px rgba(0, 0, 0, 0.6)',
        'card-professional': '0 10px 30px rgba(0, 0, 0, 0.1)',
        'card-professional-dark': '0 10px 30px rgba(0, 0, 0, 0.4)'
      },
      backdropBlur: {
        'xs': '2px',
        'professional': '20px'
      },
      animation: {
        'fade-in': 'fadeIn 0.6s ease-out',
        'slide-up': 'slideUp 0.6s ease-out',
        'scale-in': 'scaleIn 0.4s ease-out',
        'pulse-professional': 'pulseProfessional 2s infinite'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(30px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' }
        },
        scaleIn: {
          '0%': { opacity: '0', transform: 'scale(0.9)' },
          '100%': { opacity: '1', transform: 'scale(1)' }
        },
        pulseProfessional: {
          '0%, 100%': { opacity: '1', transform: 'scale(1)' },
          '50%': { opacity: '0.5', transform: 'scale(1.1)' }
        }
      },
      fontFamily: {
        'mercedes': ['Inter', 'system-ui', 'sans-serif']
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
  ],
}