/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Modern dark theme
        dark: {
          primary: '#0f0f0f',
          secondary: '#171717',
          tertiary: '#1f1f1f',
          elevated: '#262626',
          hover: '#2a2a2a',
          border: '#2e2e2e',
          'border-light': '#3a3a3a',
        },
        // Blue accent
        accent: {
          DEFAULT: '#3b82f6',
          light: '#60a5fa',
          dark: '#2563eb',
        },
        // Status colors
        status: {
          success: '#22c55e',
          warning: '#f59e0b',
          error: '#ef4444',
        },
        // Legacy imperial colors (for gradual migration)
        imperial: {
          black: '#0a0a0a',
          dark: '#1a1a1a',
          medium: '#2a2a2a',
          light: '#3a3a3a',
          red: '#cc0000',
          'red-dark': '#990000',
          'red-light': '#ff3333',
        },
      },
      fontFamily: {
        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
      },
      fontSize: {
        'touch': '1.125rem',
      },
      spacing: {
        'touch': '44px',
        'touch-lg': '56px',
      },
      borderRadius: {
        'xl': '0.75rem',
        '2xl': '1rem',
      },
      boxShadow: {
        'glow-green': '0 0 8px rgba(34, 197, 94, 0.3)',
        'glow-blue': '0 0 8px rgba(59, 130, 246, 0.3)',
        'glow-orange': '0 0 8px rgba(249, 115, 22, 0.3)',
      },
      animation: {
        'fade-in': 'fade-in 0.2s ease-out',
        'slide-up': 'slide-up 0.3s ease-out',
        'pulse': 'pulse 2s ease-in-out infinite',
      },
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'slide-up': {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        'pulse': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.5' },
        },
      },
    },
  },
  plugins: [],
};