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

/* Custom components */
@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
  }
  
  .article-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow duration-200;
  }
  
  .language-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 ml-2;
  }
  
  .translation-notice {
    @apply bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6;
  }
  
  .translation-notice-text {
    @apply text-yellow-800 text-sm font-medium;
  }
}

/* Mobile-first responsive design */
@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 font-sans;
  }
  
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Typography */
  h1 {
    @apply text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-6;
  }
  
  h2 {
    @apply text-2xl sm:text-3xl font-bold text-gray-900 mb-4;
  }
  
  h3 {
    @apply text-xl sm:text-2xl font-semibold text-gray-900 mb-3;
  }
  
  .article-title {
    @apply text-xl sm:text-2xl font-black text-primary-600 hover:text-primary-700 transition-colors duration-200;
  }
  
  .article-meta {
    @apply text-sm text-gray-600 mt-2;
  }
  
  .article-summary {
    @apply text-gray-700 mt-2 leading-relaxed;
  }
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .mobile-menu {
    @apply flex flex-col space-y-2;
  }
  
  .mobile-header {
    @apply flex-col space-y-4;
  }
  
  .mobile-nav {
    @apply flex-wrap justify-center;
  }
}