/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/popup/**/*.{js,jsx,ts,tsx}', './extension/popup/index.html'],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6366f1',
          hover: '#4f46e5'
        },
        gradient: {
          start: '#0f172a',
          end: '#1e1b4b'
        },
        panel: {
          bg: 'rgba(255, 255, 255, 0.05)',
          border: 'rgba(255, 255, 255, 0.1)'
        },
        text: {
          primary: '#f8fafc',
          secondary: '#94a3b8'
        },
        input: {
          bg: 'rgba(0, 0, 0, 0.2)',
          border: 'rgba(255, 255, 255, 0.15)',
          focus: '#818cf8'
        },
        success: '#10b981',
        error: '#ef4444'
      },
      fontFamily: {
        sans: [
          'Inter',
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'Helvetica',
          'Arial',
          'sans-serif'
        ]
      },
      animation: {
        float: 'float 3s ease-in-out infinite'
      },
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-4px)' }
        }
      }
    }
  },
  plugins: []
};