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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-900 font-medium px-4 py-2 rounded-lg transition-colors duration-200;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700;
  }
  
  .input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }
  
  /* Line clamp utilities for text truncation */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Toast animations */
  @keyframes slide-in-top {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-top {
    animation: slide-in-top 0.3s ease-out;
  }

  /* Thin auto-hiding scrollbar for Discover tab */
  .discover-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .discover-scroll:hover {
    scrollbar-color: rgba(100, 100, 140, 0.3) transparent;
  }
  .discover-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .discover-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .discover-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
  }
  .discover-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 140, 0.3);
  }
  .discover-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 140, 0.5);
  }
} 