// @ts-nocheck
import type { Config } from 'tailwindcss'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import headlessui from '@headlessui/tailwindcss'

const config: Config = {
    darkMode: 'class',
    content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {
            colors: {
                // Design System Colors from refactor plan
                primary: {
                    DEFAULT: '#3b82f6',
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6', // Main primary color
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                    950: '#172554',
                },
                success: {
                    50: '#ecfdf5',
                    100: '#d1fae5',
                    200: '#a7f3d0',
                    300: '#6ee7b7',
                    400: '#34d399',
                    500: '#10b981', // Main success color
                    600: '#059669',
                    700: '#047857',
                    800: '#065f46',
                    900: '#064e3b',
                    950: '#022c22',
                },
                warning: {
                    50: '#fffbeb',
                    100: '#fef3c7',
                    200: '#fde68a',
                    300: '#fcd34d',
                    400: '#fbbf24',
                    500: '#f59e0b', // Main warning color
                    600: '#d97706',
                    700: '#b45309',
                    800: '#92400e',
                    900: '#78350f',
                    950: '#4c2209',
                },
                error: {
                    50: '#fef2f2',
                    100: '#fee2e2',
                    200: '#fecaca',
                    300: '#fca5a5',
                    400: '#f87171',
                    500: '#ef4444', // Main error color
                    600: '#dc2626',
                    700: '#b91c1c',
                    800: '#991b1b',
                    900: '#7f1d1d',
                    950: '#661010',
                },
                neutral: {
                    50: '#f8fafc',
                    100: '#f1f5f9',
                    200: '#e2e8f0',
                    300: '#cbd5e1',
                    400: '#94a3b8',
                    500: '#64748b', // Main neutral color
                    600: '#475569',
                    700: '#334155',
                    800: '#1e293b',
                    900: '#0f172a',
                },
                // Legacy colors for backward compatibility
                secondary: '#FFB26B',
                accent: '#FFD56B',
                info: '#54C7FF',
                danger: '#FF4D4D',
                dark: '#393E46',
                light: '#FFF8F0',
                black: '#000000',
                // Additional color aliases for design tokens
                'surface-primary': '#ffffff', // Light surface
                'surface-secondary': '#f8fafc',
                'surface-elevated': '#ffffff', // elevated surface same as primary for now
                'surface-hover': '#f1f5f9', // neutral-100, subtle hover for surfaces
                'surface-soft': '#f8fafc', // neutral-50, extra soft surface
                // Border colors
                'border-secondary': '#e2e8f0', // neutral-200
                'border-subtle': '#cbd5e1',    // neutral-300
                // Text colors
                'text-primary': '#0f172a',     // neutral-900
                'text-secondary': '#475569',   // neutral-600
                'text-tertiary': '#94a3b8',   // neutral-400
                // Border primary alias (light)
                'border-primary': '#bfdbfe',  // primary-200
            },
            spacing: {
                // Design system spacing (base unit: 4px)
                '1': '4px',
                '2': '8px',
                '3': '12px',
                '4': '16px', // Component spacing
                '5': '20px',
                '6': '24px', // Component spacing
                '7': '28px',
                '8': '32px', // Component spacing
                '9': '36px',
                '10': '40px',
                '11': '44px',
                '12': '48px', // Section spacing
                '14': '56px',
                '16': '64px', // Section spacing
                '20': '80px',
                '24': '96px',
                '28': '112px',
                '32': '128px',
                // Alias tokens for design system (used as spacing-[size])
                'spacing-xs': '4px',   // 1
                'spacing-sm': '8px',   // 2
                'spacing-md': '16px',  // 4
                'spacing-lg': '24px',  // 6
                'spacing-xl': '32px',  // 8
            },
            fontFamily: {
                // Typography system
                sans: [
                    'Inter',
                    '-apple-system',
                    'BlinkMacSystemFont',
                    'San Francisco',
                    'Segoe UI',
                    'Roboto',
                    'Helvetica Neue',
                    'Arial',
                    'sans-serif'
                ],
                mono: [
                    'JetBrains Mono',
                    'SFMono-Regular',
                    'Monaco',
                    'Consolas',
                    'Liberation Mono',
                    'Courier New',
                    'monospace'
                ],
                // Legacy
                hand: ['"Patrick Hand"', 'cursive'],
            },
            fontSize: {
                'xs': ['0.75rem', { lineHeight: '1rem' }],
                'sm': ['0.875rem', { lineHeight: '1.25rem' }],
                'base': ['1rem', { lineHeight: '1.5rem' }],
                'lg': ['1.125rem', { lineHeight: '1.75rem' }],
                'xl': ['1.25rem', { lineHeight: '1.75rem' }],
                '2xl': ['1.5rem', { lineHeight: '2rem' }],
                '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
                '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
                '5xl': ['3rem', { lineHeight: '1' }],
                '6xl': ['3.75rem', { lineHeight: '1' }],
                // Alias font-size tokens for design system
                'label-xs': ['0.75rem', { lineHeight: '1rem' }],
                'label-sm': ['0.875rem', { lineHeight: '1.25rem' }],
                'body-sm': ['0.875rem', { lineHeight: '1.25rem' }],
                'heading-lg': ['1.5rem', { lineHeight: '2rem' }],
            },
            transitionDuration: {
                // Motion system
                'micro': '150ms', // Micro-interactions
                'page': '300ms', // Page transitions
                'slow': '500ms', // Loading states
                // Medium alias (used in components)
                'medium': '300ms',
            },
            transitionTimingFunction: {
                // Custom timing functions for design system
                'micro': 'cubic-bezier(0.4, 0, 0.2, 1)',   // alias for ease-out micro interactions
                'medium': 'cubic-bezier(0.4, 0, 0.2, 1)',  // same curve, longer duration
                'page': 'cubic-bezier(0.4, 0, 0.6, 1)',    // ease-in-out for page transitions
            },
            keyframes: {
                // Skeleton loading animation
                skeleton: {
                    '0%': { opacity: '1' },
                    '50%': { opacity: '0.4' },
                    '100%': { opacity: '1' },
                },
                // Fade in animation
                fadeIn: {
                    '0%': { opacity: '0', transform: 'translateY(10px)' },
                    '100%': { opacity: '1', transform: 'translateY(0)' },
                },
                // Scale in animation
                scaleIn: {
                    '0%': { opacity: '0', transform: 'scale(0.95)' },
                    '100%': { opacity: '1', transform: 'scale(1)' },
                },
            },
            animation: {
                'skeleton': 'skeleton 1.5s ease-in-out infinite',
                'fade-in': 'fadeIn 300ms ease-out',
                'scale-in': 'scaleIn 150ms ease-out',
            },
            backdropBlur: {
                xs: '2px',
            },
            boxShadow: {
                'soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
                'medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
                'strong': '0 8px 24px rgba(0, 0, 0, 0.12)',
                'floating': '0 12px 32px rgba(0, 0, 0, 0.16)',
                // Alias box-shadow tokens matching naming convention in components
                'elevation-soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
                'elevation-medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
                'elevation-strong': '0 8px 24px rgba(0, 0, 0, 0.12)',
                'elevation-high': '0 16px 48px rgba(0,0,0,0.18)',
            },
            borderRadius: {
                // Radius alias tokens
                'radius-sm': '4px',
                'radius-md': '8px',
                'radius-lg': '12px',
                'radius-full': '9999px',
            },
            zIndex: {
                60: '60',
            },
        },
    },
    plugins: [
        forms,
        typography,
        headlessui({ prefix: 'ui' }),
    ],
}

export default config