/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      colors: {
        // Core colors from the palette
        'primary': {
          900: '#000000',  // #000000
          800: '#05080a',  // #05080a
          700: '#071d2a',  // #071d2a
          600: '#0f212e',  // #0f212e - dark navy
          500: '#1a2c38',  // #1a2c38
          400: '#213743',  // #213743
          300: '#2f4553',  // #2f4553
        },
        'accent': {
          blue: '#1475e1',    // Bright blue
          green: '#00e701',   // Bright green
        },
        'gray': {
          400: '#557086',     // Mid gray
          300: '#b1bad3',     // Light gray
          200: '#d5dceb',     // Lighter gray
          100: '#ffffff',     // White
        },
        // Semantic colors
        'gold': {
          DEFAULT: '#b1bad3',
          light: '#d5dceb',
          dark: '#557086',
        },
      },
      animation: {
        'fadeIn': 'fadeIn 0.3s ease-out',
        'backdropBlur': 'backdropBlur 0.4s ease-out',
        'modalSlideIn': 'modalSlideIn 0.5s cubic-bezier(0.16,1,0.3,1)',
        'slideDown': 'slideDown 0.6s ease-out',
        'slideUp': 'slideUp 0.6s ease-out',
        'scaleIn': 'scaleIn 0.8s cubic-bezier(0.16,1,0.3,1)',
        'spinAndBounce': 'spinAndBounce 3s ease-in-out infinite',
        'glow': 'glow 4s ease-in-out infinite',
        'marquee': 'marquee 30s linear infinite',
        'float': 'float 6s ease-in-out infinite',
        'tiltAndGlow': 'tiltAndGlow 3s ease-in-out infinite',
        'shimmer': 'shimmer 2s linear infinite',
        'morphBackground': 'morphBackground 10s ease-in-out infinite',
        'elasticScale': 'elasticScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        'bounceAndFade': 'bounceAndFade 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        'rotateAndScale': 'rotateAndScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        'pulseGlow': 'pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        fadeIn: {
          'from': { opacity: '0' },
          'to': { opacity: '1' }
        },
        backdropBlur: {
          'from': { 
            'backdrop-filter': 'blur(0px)',
            'background-color': 'rgba(0,0,0,0)'
          },
          'to': { 
            'backdrop-filter': 'blur(16px)',
            'background-color': 'rgba(0,0,0,0.95)'
          }
        },
        modalSlideIn: {
          'from': {
            opacity: '0',
            transform: 'scale(0.95) translateY(10px)'
          },
          'to': {
            opacity: '1',
            transform: 'scale(1) translateY(0)'
          }
        },
        slideDown: {
          'from': {
            opacity: '0',
            transform: 'translateY(-20px)'
          },
          'to': {
            opacity: '1',
            transform: 'translateY(0)'
          }
        },
        slideUp: {
          'from': {
            opacity: '0',
            transform: 'translateY(20px)'
          },
          'to': {
            opacity: '1',
            transform: 'translateY(0)'
          }
        },
        scaleIn: {
          'from': {
            opacity: '0',
            transform: 'scale(0.9)'
          },
          'to': {
            opacity: '1',
            transform: 'scale(1)'
          }
        },
        spinAndBounce: {
          '0%': {
            transform: 'scale(1) rotate(0deg)'
          },
          '50%': {
            transform: 'scale(1.2) rotate(180deg)'
          },
          '100%': {
            transform: 'scale(1) rotate(360deg)'
          }
        },
        glow: {
          '0%, 100%': {
            opacity: '0.3',
            transform: 'scale(1)'
          },
          '50%': {
            opacity: '0.5',
            transform: 'scale(1.05)'
          }
        },
        marquee: {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-100%)' }
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-20px)' }
        },
        tiltAndGlow: {
          '0%, 100%': {
            transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg)',
            'box-shadow': '0 0 20px rgba(34,197,94,0.2)'
          },
          '50%': {
            transform: 'perspective(1000px) rotateX(2deg) rotateY(5deg)',
            'box-shadow': '0 0 40px rgba(34,197,94,0.4)'
          }
        },
        shimmer: {
          '0%': {
            'background-position': '-1000px 0'
          },
          '100%': {
            'background-position': '1000px 0'
          }
        },
        morphBackground: {
          '0%, 100%': {
            'border-radius': '60% 40% 30% 70%/60% 30% 70% 40%'
          },
          '50%': {
            'border-radius': '30% 60% 70% 40%/50% 60% 30% 60%'
          }
        },
        elasticScale: {
          '0%': {
            transform: 'scale(0)'
          },
          '60%': {
            transform: 'scale(1.1)'
          },
          '100%': {
            transform: 'scale(1)'
          }
        },
        bounceAndFade: {
          '0%': {
            transform: 'scale(0.3)',
            opacity: '0'
          },
          '50%': {
            transform: 'scale(1.05)',
            opacity: '0.8'
          },
          '100%': {
            transform: 'scale(1)',
            opacity: '1'
          }
        },
        rotateAndScale: {
          '0%': {
            transform: 'rotate(-180deg) scale(0)'
          },
          '100%': {
            transform: 'rotate(0) scale(1)'
          }
        },
        pulseGlow: {
          '0%, 100%': {
            opacity: '1',
            transform: 'scale(1)',
            filter: 'brightness(1)'
          },
          '50%': {
            opacity: '0.8',
            transform: 'scale(1.05)',
            filter: 'brightness(1.2)'
          }
        }
      },
      transitionDelay: {
        '100': '100ms',
        '200': '200ms',
        '300': '300ms',
        '400': '400ms',
        '500': '500ms',
      },
      transitionTimingFunction: {
        'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
        'elastic': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
        'spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
      },
      backdropBlur: {
        'xs': '2px',
        '4xl': '72px',
        '5xl': '96px',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
        'shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)',
      }
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('tailwindcss-animated'),
    require('tailwindcss-gradients'),
    require('tailwindcss-transforms'),
    require('tailwindcss-filters'),
    require('tailwind-scrollbar-hide'),
  ],
}