/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // DRRR Theme
        drrr: {
          bg: '#0a0a0a',
          primary: '#FFE135',
          secondary: '#00FFFF',
          accent: '#FF00FF',
        },
        // Retro Arcade Theme
        retro: {
          bg: '#1a1a2e',
          primary: '#9B59B6',
          secondary: '#E91E63',
          accent: '#00FFFF',
        },
        // Gaming RGB Theme
        rgb: {
          bg: '#0D0D0D',
          primary: '#FF0000',
          secondary: '#00FF00',
          accent: '#0000FF',
        },
        // Anime 90s Theme
        anime: {
          bg: '#FFF5F5',
          primary: '#FFB6C1',
          secondary: '#E6E6FA',
          accent: '#FF69B4',
        },
      },
      fontFamily: {
        'pixel': ['"Press Start 2P"', 'cursive'],
        'urban': ['Bebas Neue', 'sans-serif'],
      },
      animation: {
        'glitch': 'glitch 0.3s infinite',
        'pulse-neon': 'pulse-neon 2s infinite',
        'scanline': 'scanline 8s linear infinite',
        'sparkle': 'sparkle 1.5s infinite',
        'rgb-shift': 'rgb-shift 3s infinite',
      },
      keyframes: {
        glitch: {
          '0%, 100%': { transform: 'translate(0)' },
          '20%': { transform: 'translate(-2px, 2px)' },
          '40%': { transform: 'translate(-2px, -2px)' },
          '60%': { transform: 'translate(2px, 2px)' },
          '80%': { transform: 'translate(2px, -2px)' },
        },
        'pulse-neon': {
          '0%, 100%': { boxShadow: '0 0 5px currentColor, 0 0 10px currentColor' },
          '50%': { boxShadow: '0 0 20px currentColor, 0 0 30px currentColor' },
        },
        scanline: {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(100%)' },
        },
        sparkle: {
          '0%, 100%': { opacity: 1, transform: 'scale(1)' },
          '50%': { opacity: 0.5, transform: 'scale(0.8)' },
        },
        'rgb-shift': {
          '0%': { filter: 'hue-rotate(0deg)' },
          '100%': { filter: 'hue-rotate(360deg)' },
        },
      },
    },
  },
  plugins: [],
}