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


@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-blue-600 dark:bg-blue-500 text-white font-medium rounded-md shadow hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply px-6 py-3 bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 font-medium rounded-md shadow hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors duration-200;
  }
  
  .btn-spotify {
    @apply px-4 py-2 bg-slate-800 dark:bg-slate-700 text-white rounded-full text-sm font-medium hover:bg-slate-700 dark:hover:bg-slate-600 transition-colors duration-200;
  }
  
  .btn-spotify-active {
    @apply px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-full text-sm font-medium transition-colors duration-200;
  }
  
  .card {
    @apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-sm;
  }
  
  .text-primary {
    @apply text-slate-900 dark:text-slate-100;
  }
  
  .text-secondary {
    @apply text-slate-600 dark:text-slate-400;
  }
  
  .text-muted {
    @apply text-slate-500 dark:text-slate-500;
  }
  
  .feed-thumbnail {
    @apply w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center shadow-sm;
  }
  
  .feed-thumbnail-large {
    @apply w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center shadow-sm;
  }
}

@layer utilities {
  .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;
  }

  .animate-fade-in-down {
    animation: fadeInDown 0.5s ease-out;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(-50%, -20px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}