import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: ['class'],
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        // Phoenix Fire colors
        phoenix: {
          fire: '#FF4500',
          flame: '#FF8C00',
          ember: '#FF6B35',
        },
        // Sankofa Gold
        sankofa: {
          gold: '#FFD700',
          earth: '#8B4513',
        },
        // Sovereignty Purple
        sovereignty: {
          purple: '#6A0DAD',
          deep: '#4B0082',
        },
        // Ancestral Blue
        ancestral: {
          blue: '#1E3A8A',
          deep: '#0F1B3D',
        },
        // Studio Quality Dark Theme
        studio: {
          black: '#0A0A0A',
          dark: '#1A1A1A',
          medium: '#2A2A2A',
        },
        // Neon/Cinematic Accents
        neon: {
          teal: '#00FFD1',
          magenta: '#FF00FF',
          cyan: '#00FFFF',
          amber: '#FFB800',
        },
        // Status Colors
        status: {
          success: '#00FF88',
          warning: '#FFB800',
          error: '#FF0040',
          info: '#00B8FF',
        },
        // Foreground/Background
        foreground: '#FFFFFF',
        background: '#0A0A0A',
      },
      fontFamily: {
        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      spacing: {
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px',
        '2xl': '48px',
        '3xl': '64px',
        '4xl': '96px',
        '5xl': '128px',
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'glow': 'glow 2s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        glow: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.5' },
        },
      },
    },
  },
  plugins: [
    function ({ addUtilities }: { addUtilities: (utilities: Record<string, Record<string, string>>) => void }) {
      addUtilities({
        '.select-none': {
          '-webkit-user-select': 'none',
          'user-select': 'none',
        },
        '.select-text': {
          '-webkit-user-select': 'text',
          'user-select': 'text',
        },
        '.select-all': {
          '-webkit-user-select': 'all',
          'user-select': 'all',
        },
        '.select-auto': {
          '-webkit-user-select': 'auto',
          'user-select': 'auto',
        },
      })
    },
  ],
}

export default config