/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        spotify: {
          green: '#1db954',
          dark: '#191414',
          gray: '#282828',
          lightgray: '#b3b3b3',
        },
        glass: {
          white: 'rgba(255, 255, 255, 0.1)',
          black: 'rgba(0, 0, 0, 0.2)',
          border: 'rgba(255, 255, 255, 0.2)',
        },
        theme: {
          green: {
            primary: '#1db954',
            secondary: '#1ed760',
            accent: '#00e676',
          },
          pink: {
            primary: '#ec4899',
            secondary: '#f472b6',
            accent: '#fb7185',
          },
          blue: {
            primary: '#3b82f6',
            secondary: '#60a5fa',
            accent: '#93c5fd',
          },
          red: {
            primary: '#dc2626',
            secondary: '#ef4444',
            accent: '#f87171',
          },
          purple: {
            primary: '#8b5cf6',
            secondary: '#a78bfa',
            accent: '#c4b5fd',
          },
          yellow: {
            primary: '#eab308',
            secondary: '#f59e0b',
            accent: '#fbbf24',
          },
          turquoise: {
            primary: '#06b6d4',
            secondary: '#22d3ee',
            accent: '#67e8f9',
          },
        }
      },
      backdropBlur: {
        xs: '2px',
      },
      animation: {
        'float': 'float 6s ease-in-out infinite',
        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'bounce-slow': 'bounce 3s infinite',
        'glow': 'glow 2s ease-in-out infinite alternate',
        'wave-flow': 'wave-flow 8s ease-in-out infinite',
        'bubble-float': 'bubble-float 6s ease-in-out infinite',
      },
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-20px)' },
        },
        glow: {
          '0%': { boxShadow: '0 0 20px var(--theme-primary)' },
          '100%': { boxShadow: '0 0 30px var(--theme-primary)' },
        },
        'wave-flow': {
          '0%, 100%': { transform: 'translateY(0px) translateX(0px) scale(1)', opacity: '0.3' },
          '25%': { transform: 'translateY(-50px) translateX(30px) scale(1.1)', opacity: '0.6' },
          '50%': { transform: 'translateY(-20px) translateX(-20px) scale(0.9)', opacity: '0.4' },
          '75%': { transform: 'translateY(-80px) translateX(40px) scale(1.2)', opacity: '0.7' },
        },
        'bubble-float': {
          '0%, 100%': { transform: 'translateY(0px) scale(1)', opacity: '0.5' },
          '50%': { transform: 'translateY(-20px) scale(1.1)', opacity: '0.8' },
        }
      },
      fontFamily: {
        'spotify': ['Circular', 'Helvetica', 'Arial', 'sans-serif'],
      }
    },
  },
  plugins: [],
}