/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  // Don't prefix classes - we'll scope with .boostbot-admin
  important: '.boostbot-admin',
  theme: {
    extend: {
      colors: {
        // BoostBot Design System Colors
        primary: {
          50: '#E8F9FA',
          100: '#D1F3F6',
          200: '#A3E7EC',
          300: '#75DBE3',
          400: '#47CFD9',
          500: '#3BC2D0', // Primary
          600: '#2F9BA6',
          700: '#23747D',
          800: '#184D53',
          900: '#0C262A',
        },
        accent: {
          50: '#FDE8F0',
          100: '#FAD1E1',
          200: '#F5A3C3',
          300: '#F075A5',
          400: '#EB4787',
          500: '#E32774', // Accent
          600: '#B61F5D',
          700: '#881746',
          800: '#5B0F2E',
          900: '#2D0817',
        },
        // Status colors
        success: {
          50: '#ECFDF5',
          500: '#10B981',
          600: '#059669',
        },
        warning: {
          50: '#FFFBEB',
          500: '#F59E0B',
          600: '#D97706',
        },
        error: {
          50: '#FEF2F2',
          500: '#EF4444',
          600: '#DC2626',
        },
      },
      // Direction-aware font families
      fontFamily: {
        // LTR fonts (English)
        sans: ['system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
        display: ['Inter', 'system-ui', 'sans-serif'],
        // RTL fonts (Hebrew) - applied via CSS when dir="rtl"
        'sans-rtl': ['Heebo', 'system-ui', 'sans-serif'],
        'display-rtl': ['TelAviv-Brutalist', 'Heebo', 'sans-serif'],
      },
      // Logical properties for direction-aware spacing
      spacing: {
        // Standard spacing is already supported by Tailwind
      },
      // Logical margin/padding utilities
      margin: {
        'start-auto': 'auto', // Will be applied via CSS logical properties
        'end-auto': 'auto',
      },
      padding: {
        'start-auto': 'auto',
        'end-auto': 'auto',
      },
      boxShadow: {
        'card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
        'card-hover': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
      },
      borderRadius: {
        'xl': '1rem',
        '2xl': '1.5rem',
      },
      animation: {
        'wiggle': 'wiggle 0.5s ease-in-out infinite',
        'fade-in': 'fadeIn 0.3s ease-out',
        'pop-in': 'popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(5px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        popIn: {
          '0%': { transform: 'scale(0) translateY(10px)', opacity: '0' },
          '100%': { transform: 'scale(1) translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [
    // Plugin for direction-aware utilities
    function({ addUtilities }) {
      const logicalUtilities = {
        // Text alignment
        '.text-start': { 'text-align': 'start' },
        '.text-end': { 'text-align': 'end' },
        
        // Flexbox alignment
        '.justify-start': { 'justify-content': 'flex-start' },
        '.justify-end': { 'justify-content': 'flex-end' },
        
        // Position
        '.start-0': { 'inset-inline-start': '0' },
        '.end-0': { 'inset-inline-end': '0' },
        '.start-1': { 'inset-inline-start': '0.25rem' },
        '.end-1': { 'inset-inline-end': '0.25rem' },
        '.start-2': { 'inset-inline-start': '0.5rem' },
        '.end-2': { 'inset-inline-end': '0.5rem' },
        '.start-4': { 'inset-inline-start': '1rem' },
        '.end-4': { 'inset-inline-end': '1rem' },
        '.start-auto': { 'inset-inline-start': 'auto' },
        '.end-auto': { 'inset-inline-end': 'auto' },
        
        // Margin (inline-start/end)
        '.ms-0': { 'margin-inline-start': '0' },
        '.me-0': { 'margin-inline-end': '0' },
        '.ms-1': { 'margin-inline-start': '0.25rem' },
        '.me-1': { 'margin-inline-end': '0.25rem' },
        '.ms-2': { 'margin-inline-start': '0.5rem' },
        '.me-2': { 'margin-inline-end': '0.5rem' },
        '.ms-3': { 'margin-inline-start': '0.75rem' },
        '.me-3': { 'margin-inline-end': '0.75rem' },
        '.ms-4': { 'margin-inline-start': '1rem' },
        '.me-4': { 'margin-inline-end': '1rem' },
        '.ms-6': { 'margin-inline-start': '1.5rem' },
        '.me-6': { 'margin-inline-end': '1.5rem' },
        '.ms-8': { 'margin-inline-start': '2rem' },
        '.me-8': { 'margin-inline-end': '2rem' },
        '.ms-auto': { 'margin-inline-start': 'auto' },
        '.me-auto': { 'margin-inline-end': 'auto' },
        
        // Padding (inline-start/end)
        '.ps-0': { 'padding-inline-start': '0' },
        '.pe-0': { 'padding-inline-end': '0' },
        '.ps-1': { 'padding-inline-start': '0.25rem' },
        '.pe-1': { 'padding-inline-end': '0.25rem' },
        '.ps-2': { 'padding-inline-start': '0.5rem' },
        '.pe-2': { 'padding-inline-end': '0.5rem' },
        '.ps-3': { 'padding-inline-start': '0.75rem' },
        '.pe-3': { 'padding-inline-end': '0.75rem' },
        '.ps-4': { 'padding-inline-start': '1rem' },
        '.pe-4': { 'padding-inline-end': '1rem' },
        '.ps-6': { 'padding-inline-start': '1.5rem' },
        '.pe-6': { 'padding-inline-end': '1.5rem' },
        '.ps-8': { 'padding-inline-start': '2rem' },
        '.pe-8': { 'padding-inline-end': '2rem' },
        
        // Border (inline-start/end)
        '.border-s': { 'border-inline-start-width': '1px' },
        '.border-e': { 'border-inline-end-width': '1px' },
        '.border-s-2': { 'border-inline-start-width': '2px' },
        '.border-e-2': { 'border-inline-end-width': '2px' },
        '.border-s-0': { 'border-inline-start-width': '0' },
        '.border-e-0': { 'border-inline-end-width': '0' },
        
        // Border radius (start/end)
        '.rounded-s': { 
          'border-start-start-radius': '0.25rem',
          'border-end-start-radius': '0.25rem',
        },
        '.rounded-e': { 
          'border-start-end-radius': '0.25rem',
          'border-end-end-radius': '0.25rem',
        },
        '.rounded-s-lg': { 
          'border-start-start-radius': '0.5rem',
          'border-end-start-radius': '0.5rem',
        },
        '.rounded-e-lg': { 
          'border-start-end-radius': '0.5rem',
          'border-end-end-radius': '0.5rem',
        },
        
        // Flex direction (for RTL)
        '.flex-row-reverse-rtl': {},
        
        // Icon flip for RTL (arrows, chevrons)
        '.rtl\\:flip': {},
        '[dir="rtl"] .rtl\\:flip': { 'transform': 'scaleX(-1)' },
      };
      addUtilities(logicalUtilities);
    },
  ],
  // RTL support via CSS logical properties
  corePlugins: {
    // Standard core plugins enabled
  },
}






