@tailwind base;
@tailwind components;
@tailwind utilities;

/* Search highlight styles */
mark {
  background-color: #fef08a;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 500;
}

/* Touch-optimized tap targets - minimum 44x44px for iOS */
@layer utilities {
  .tap-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .tap-target-sm {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Animations for visual feedback */
@layer utilities {
  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes scale-in {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
  }
  
  .animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }
  
  .animate-scale-in {
    animation: scale-in 0.2s ease-out;
  }
  
  /* Smooth transitions for interactive elements */
  .transition-smooth {
    transition: all 0.2s ease-in-out;
  }
}

/* Smooth scrolling for better mobile experience */
@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
  }
  
  /* Improve touch scrolling on iOS */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better focus states for accessibility */
  *:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
  }
  
  /* Prevent text selection on buttons for better mobile UX */
  button {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
}