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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  
  /* SmatchRoom Button Styles */
  .btn-sr-primary {
    @apply inline-flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-sr-teal hover:bg-sr-teal/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sr-teal transition-colors cursor-pointer;
  }
  
  .btn-sr-secondary {
    @apply inline-flex justify-center py-3 px-4 border border-sr-teal rounded-lg shadow-sm text-sm font-medium text-sr-teal bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sr-teal transition-colors;
  }
  
  .btn-sr-navy {
    @apply inline-flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-sr-navy hover:bg-sr-navy/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sr-navy transition-colors cursor-pointer;
  }
  
  .btn-sr-danger {
    @apply inline-flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors cursor-pointer;
  }
  
  /* Swipe Interface Styles */
  .swipe-card {
    @apply cursor-grab select-none;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  }
  
  .swipe-card:active {
    @apply cursor-grabbing;
  }
  
  .swipe-card-dragging {
    transition: none !important;
  }
  
  /* Action buttons with improved touch targets */
  .swipe-action-btn {
    @apply w-14 h-14 rounded-full flex items-center justify-center transition-all duration-200;
    min-height: 44px; /* iOS recommended minimum touch target */
    min-width: 44px;
  }
  
  .swipe-action-btn:active {
    @apply scale-95;
  }
  
  /* Compatibility bar animation */
  .compatibility-bar {
    transition: width 0.5s ease-out;
  }
  
  /* Action indicators */
  .action-indicator {
    @apply px-4 py-2 rounded-full font-bold text-lg shadow-lg backdrop-blur-sm;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }
  
  .action-indicator.show {
    @apply opacity-100;
    transform: scale(1);
  }
  
  .action-indicator.hide {
    @apply opacity-0;
    transform: scale(0.8);
  }
  
  /* Smooth card stacking */
  .card-stack {
    perspective: 1000px;
  }
  
  .card-behind {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, filter 0.3s ease-out;
  }
  
  .card-far-behind {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, filter 0.3s ease-out;
  }
  
  /* Mobile-first responsive adjustments */
  @media (max-width: 640px) {
    .swipe-card {
      @apply rounded-xl; /* Slightly less rounded on small screens */
    }
    
    .swipe-action-btn {
      @apply w-12 h-12; /* Slightly smaller on very small screens */
    }
  }
  
  /* Haptic feedback simulation */
  .haptic-light {
    animation: haptic-light 0.1s ease-out;
  }
  
  .haptic-medium {
    animation: haptic-medium 0.15s ease-out;
  }
  
  @keyframes haptic-light {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }
  
  @keyframes haptic-medium {
    0% { transform: scale(1); }
    25% { transform: scale(0.98); }
    75% { transform: scale(1.03); }
    100% { transform: scale(1); }
  }
  
  /* Swipe feedback animation */
  .swipe-feedback {
    animation: swipe-feedback 1s ease-out forwards;
  }
  
  @keyframes swipe-feedback {
    0% { 
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.1);
    }
    80% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.9);
    }
  }
  
  /* Loading skeleton for cards */
  .card-skeleton {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  /* Improved scrollbar for filters */
  .filter-scroll::-webkit-scrollbar {
    display: none;
  }
  
  .filter-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  /* Tooltip animations */
  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }
  
  .animate-scale-in {
    animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  
  @keyframes fade-in {
    0% { 
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes scale-in {
    0% { 
      opacity: 0;
      transform: scale(0.8) translateY(20px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  /* Swipe tooltip specific styles */
  .swipe-tooltip {
    backdrop-filter: blur(4px);
  }
}