/** @type {import('tailwindcss').Config} */

// Helper function to create CSS variable color with alpha support
const withAlpha = (variableName) => `rgb(var(${variableName}) / <alpha-value>)`

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // =================================================================
        // CSS VARIABLE COLORS (Dynamic Theming Support)
        // These reference CSS variables defined in index.css
        // Supports alpha via: bg-primary-500/50, text-foreground/80, etc.
        // =================================================================

        // Primary Palette - Uses CSS Variables
        primary: {
          50: withAlpha('--color-primary-50'),
          100: withAlpha('--color-primary-100'),
          200: withAlpha('--color-primary-200'),
          300: withAlpha('--color-primary-300'),
          400: withAlpha('--color-primary-400'),
          500: withAlpha('--color-primary-500'),
          600: withAlpha('--color-primary-600'),
          700: withAlpha('--color-primary-700'),
          800: withAlpha('--color-primary-800'),
          900: withAlpha('--color-primary-900'),
          DEFAULT: withAlpha('--color-primary-500'),
        },
        // Secondary Palette - Uses CSS Variables
        secondary: {
          50: withAlpha('--color-secondary-50'),
          100: withAlpha('--color-secondary-100'),
          200: withAlpha('--color-secondary-200'),
          300: withAlpha('--color-secondary-300'),
          400: withAlpha('--color-secondary-400'),
          500: withAlpha('--color-secondary-500'),
          600: withAlpha('--color-secondary-600'),
          700: withAlpha('--color-secondary-700'),
          800: withAlpha('--color-secondary-800'),
          900: withAlpha('--color-secondary-900'),
          DEFAULT: withAlpha('--color-secondary-500'),
        },
        // Semantic Colors - Uses CSS Variables
        success: {
          50: withAlpha('--color-success-50'),
          100: withAlpha('--color-success-100'),
          500: withAlpha('--color-success-500'),
          600: withAlpha('--color-success-600'),
          700: withAlpha('--color-success-700'),
          DEFAULT: withAlpha('--color-success-500'),
          light: withAlpha('--color-success-50'),
          dark: withAlpha('--color-success-700'),
        },
        warning: {
          50: withAlpha('--color-warning-50'),
          100: withAlpha('--color-warning-100'),
          500: withAlpha('--color-warning-500'),
          600: withAlpha('--color-warning-600'),
          700: withAlpha('--color-warning-700'),
          DEFAULT: withAlpha('--color-warning-500'),
          light: withAlpha('--color-warning-50'),
          dark: withAlpha('--color-warning-700'),
        },
        danger: {
          50: withAlpha('--color-danger-50'),
          100: withAlpha('--color-danger-100'),
          500: withAlpha('--color-danger-500'),
          600: withAlpha('--color-danger-600'),
          700: withAlpha('--color-danger-700'),
          DEFAULT: withAlpha('--color-danger-500'),
          light: withAlpha('--color-danger-50'),
          dark: withAlpha('--color-danger-700'),
        },
        info: {
          50: withAlpha('--color-info-50'),
          100: withAlpha('--color-info-100'),
          500: withAlpha('--color-info-500'),
          600: withAlpha('--color-info-600'),
          700: withAlpha('--color-info-700'),
          DEFAULT: withAlpha('--color-info-500'),
          light: withAlpha('--color-info-50'),
          dark: withAlpha('--color-info-700'),
        },
        // Neutral Colors - Uses CSS Variables (auto dark/light)
        background: {
          DEFAULT: withAlpha('--color-background'),
          subtle: withAlpha('--color-background-subtle'),
          muted: withAlpha('--color-background-muted'),
          emphasis: withAlpha('--color-background-emphasis'),
        },
        foreground: {
          DEFAULT: withAlpha('--color-foreground'),
          muted: withAlpha('--color-foreground-muted'),
          subtle: withAlpha('--color-foreground-subtle'),
        },
        border: {
          DEFAULT: withAlpha('--color-border'),
          subtle: withAlpha('--color-border-subtle'),
          emphasis: withAlpha('--color-border-emphasis'),
        },
        surface: {
          DEFAULT: withAlpha('--color-surface'),
          hover: withAlpha('--color-surface-hover'),
          card: withAlpha('--color-surface-card'),
          popover: withAlpha('--color-surface-popover'),
          modal: withAlpha('--color-surface-modal'),
          dropdown: withAlpha('--color-surface-dropdown'),
        },

        // =================================================================
        // STATIC HEX COLORS (Backward Compatibility)
        // Keep these for legacy code - prefix with 'static-'
        // =================================================================
        'static-primary': {
          50: '#E6F3FF',
          100: '#CCE7FF',
          200: '#99CFFF',
          300: '#66B7FF',
          400: '#339FFF',
          500: '#0061A8',
          600: '#004D86',
          700: '#003A65',
          800: '#002643',
          900: '#001322',
        },
        'static-secondary': {
          50: '#E6FFF5',
          100: '#CCFFEB',
          200: '#99FFD6',
          300: '#66FFC2',
          400: '#33FFAD',
          500: '#00A868',
          600: '#008653',
          700: '#00653F',
          800: '#00432A',
          900: '#002215',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'monospace'],
      },
      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' }],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        sm: '0.125rem',
        DEFAULT: '0.25rem',
        md: '0.375rem',
        lg: '0.5rem',
        xl: '0.75rem',
        '2xl': '1rem',
        '3xl': '1.5rem',
      },
      boxShadow: {
        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
        '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
      },
      zIndex: {
        dropdown: '1000',
        sticky: '1020',
        fixed: '1030',
        modalBackdrop: '1040',
        modal: '1050',
        popover: '1060',
        tooltip: '1070',
        toast: '1080',
      },
      animation: {
        'fade-in': 'fadeIn 0.2s ease-out',
        'fade-out': 'fadeOut 0.2s ease-in',
        'slide-in': 'slideIn 0.2s ease-out',
        'slide-out': 'slideOut 0.2s ease-in',
        'spin-slow': 'spin 2s linear infinite',
        'pulse-slow': 'pulse 3s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        fadeOut: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
        slideIn: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideOut: {
          '0%': { transform: 'translateY(0)', opacity: '1' },
          '100%': { transform: 'translateY(-10px)', opacity: '0' },
        },
      },
      transitionDuration: {
        '0': '0ms',
        '75': '75ms',
        '100': '100ms',
        '150': '150ms',
        '200': '200ms',
        '300': '300ms',
        '500': '500ms',
        '700': '700ms',
        '1000': '1000ms',
      },
      transitionTimingFunction: {
        'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
        'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
        'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}