/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/client/**/*.{js,ts,jsx,tsx,mdx}',
    './src/server/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['DM Sans', 'system-ui', 'sans-serif'],
        mono: ['IBM Plex Mono', 'monospace'],
      },
      colors: {
        primary: {
          DEFAULT: 'hsl(22, 89%, 48%)',
          light: 'hsl(22, 100%, 96%)',
          foreground: 'hsl(0, 0%, 100%)',
          50: 'hsl(22, 100%, 97%)',
          100: 'hsl(22, 100%, 93%)',
          200: 'hsl(22, 95%, 85%)',
          500: 'hsl(22, 89%, 48%)',
          600: 'hsl(22, 89%, 42%)',
          700: 'hsl(22, 89%, 36%)',
        },
        accent: {
          DEFAULT: 'hsl(231, 40%, 14%)',
          foreground: 'hsl(0, 0%, 100%)',
        },
        surface: {
          DEFAULT: 'hsl(0, 0%, 100%)',
          elevated: 'hsl(0, 0%, 100%)',
        },
        border: {
          DEFAULT: 'hsl(220, 13%, 91%)',
          strong: 'hsl(220, 13%, 84%)',
        },
        muted: {
          DEFAULT: 'hsl(220, 9%, 96%)',
          foreground: 'hsl(220, 9%, 46%)',
        },
        foreground: {
          DEFAULT: 'hsl(220, 20%, 10%)',
          secondary: 'hsl(220, 12%, 35%)',
        },
        success: {
          DEFAULT: 'hsl(142, 72%, 29%)',
          bg: 'hsl(142, 72%, 96%)',
          border: 'hsl(142, 72%, 85%)',
        },
        warning: {
          DEFAULT: 'hsl(38, 92%, 40%)',
          bg: 'hsl(38, 100%, 96%)',
          border: 'hsl(38, 92%, 80%)',
        },
        danger: {
          DEFAULT: 'hsl(0, 84%, 44%)',
          bg: 'hsl(0, 84%, 97%)',
          border: 'hsl(0, 84%, 85%)',
        },
        info: {
          DEFAULT: 'hsl(210, 100%, 40%)',
          bg: 'hsl(210, 100%, 96%)',
          border: 'hsl(210, 100%, 82%)',
        },
      },
      borderRadius: {
        sm: '6px',
        md: '10px',
        lg: '14px',
        xl: '18px',
        '2xl': '22px',
      },
      boxShadow: {
        sm: '0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04)',
        md: '0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.05)',
        lg: '0 10px 24px -4px rgb(0 0 0 / 0.10), 0 4px 10px -4px rgb(0 0 0 / 0.06)',
        xl: '0 20px 48px -8px rgb(0 0 0 / 0.14), 0 8px 20px -6px rgb(0 0 0 / 0.08)',
      },
      animation: {
        'fade-in': 'fadeIn 0.2s ease-out',
        'slide-up': 'slideUp 0.2s ease-out',
        'slide-in-right': 'slideInRight 0.25s ease-out',
        'pulse-highlight': 'pulseHighlight 0.6s ease-out',
        'marquee': 'marquee 35s linear infinite',
        'blob': 'blob 10s ease-in-out infinite',
        'blob-delayed': 'blob 10s ease-in-out infinite 4s',
        'float': 'float 4s ease-in-out infinite',
        'float-delayed': 'float 4s ease-in-out infinite 2s',
        'hero-title': 'heroTitle 0.9s cubic-bezier(0.16,1,0.3,1) forwards',
        'hero-sub': 'heroSub 0.9s cubic-bezier(0.16,1,0.3,1) 0.15s forwards',
        'hero-cta': 'heroSub 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s forwards',
        'hero-visual': 'heroVisual 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards',
        'shimmer': 'shimmer 2s linear infinite',
        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          from: { opacity: '0', transform: 'translateY(4px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        slideUp: {
          from: { opacity: '0', transform: 'translateY(8px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        slideInRight: {
          from: { opacity: '0', transform: 'translateX(24px)' },
          to: { opacity: '1', transform: 'translateX(0)' },
        },
        pulseHighlight: {
          '0%': { backgroundColor: 'hsl(38, 100%, 92%)' },
          '100%': { backgroundColor: 'transparent' },
        },
        marquee: {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(-50%)' },
        },
        blob: {
          '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
          '33%': { transform: 'translate(30px, -20px) scale(1.1)' },
          '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-8px)' },
        },
        heroTitle: {
          from: { opacity: '0', transform: 'translateY(24px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        heroSub: {
          from: { opacity: '0', transform: 'translateY(16px)' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        heroVisual: {
          from: { opacity: '0', transform: 'translateX(32px) scale(0.96)' },
          to: { opacity: '1', transform: 'translateX(0) scale(1)' },
        },
        glowPulse: {
          '0%, 100%': { boxShadow: '0 0 20px 4px rgba(249,115,22,0.3)' },
          '50%': { boxShadow: '0 0 32px 8px rgba(249,115,22,0.5)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};