/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#3BC2D0',
          50: '#E8F7F9',
          100: '#D1EFF3',
          200: '#A3DFE7',
          300: '#75CFDB',
          400: '#47BFCF',
          500: '#3BC2D0',
          600: '#2FA0AC',
          700: '#237D86',
          800: '#175A61',
          900: '#0B373B',
        },
        accent: {
          DEFAULT: '#E32774',
          50: '#FCE8F1',
          100: '#F9D1E3',
          200: '#F3A3C7',
          300: '#ED75AB',
          400: '#E7478F',
          500: '#E32774',
          600: '#B61F5D',
          700: '#891746',
          800: '#5C0F2F',
          900: '#2F0818',
        },
      },
      // Direction-aware font families
      fontFamily: {
        // LTR fonts (English)
        sans: ['system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
        heading: ['Inter', 'system-ui', 'sans-serif'],
        // RTL fonts (Hebrew) - applied via CSS when dir="rtl"
        'sans-rtl': ['Heebo', 'system-ui', 'sans-serif'],
        'heading-rtl': ['TelAviv-Brutalist', 'Heebo', 'sans-serif'],
      },
      animation: {
        'bounce-subtle': 'bounce-subtle 2s ease-in-out infinite',
        'pulse-ring': 'pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        'bounce-subtle': {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-5px)' },
        },
        'pulse-ring': {
          '0%': { transform: 'scale(1)', opacity: '0.5' },
          '100%': { transform: 'scale(1.5)', opacity: '0' },
        },
      },
      boxShadow: {
        'widget': '0 10px 40px -10px rgba(0, 0, 0, 0.2)',
        'bubble': '0 4px 20px -4px rgba(59, 194, 208, 0.5)',
      },
    },
  },
  plugins: [
    // Plugin for direction-aware utilities in widget
    function({ addUtilities }) {
      const logicalUtilities = {
        // Text alignment
        '.text-start': { 'text-align': 'start' },
        '.text-end': { 'text-align': 'end' },
        
        // Position
        '.start-0': { 'inset-inline-start': '0' },
        '.end-0': { 'inset-inline-end': '0' },
        '.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' },
        
        // Margin (inline-start/end)
        '.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-auto': { 'margin-inline-start': 'auto' },
        '.me-auto': { 'margin-inline-end': 'auto' },
        
        // Padding (inline-start/end)
        '.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' },
        
        // Border radius (start/end)
        '.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',
        },
        
        // Icon flip for RTL
        '[dir="rtl"] .rtl\\:flip': { 'transform': 'scaleX(-1)' },
      };
      addUtilities(logicalUtilities);
    },
  ],
  // Important for widget isolation
  important: '#boostbot-widget-root',
  corePlugins: {
    preflight: false,
  },
};








