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

/* Custom Base Styles */
@layer base {
  html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    @apply bg-white text-gray-900 leading-relaxed;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold leading-tight;
  }
  
  h1 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }
  
  h2 {
    @apply text-2xl md:text-3xl;
  }
  
  h3 {
    @apply text-xl md:text-2xl;
  }
  
  a {
    @apply transition-colors duration-200;
  }
}

/* Custom Components */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105;
  }
  
  .btn-primary {
    @apply bg-[#2ba283] text-white hover:bg-[#238a6b] shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply border border-[#2ba283] text-[#2ba283] hover:bg-[#2ba283] hover:text-white;
  }
  
  .card {
    @apply bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden;
  }
  
  .card:hover {
    @apply shadow-2xl transform -translate-y-1;
  }
  
  /* Section styles */
  .section {
    @apply py-16;
  }
  
  .section-title {
    @apply text-3xl font-bold text-center mb-8;
  }
  
  .section-title::after {
    content: '';
    @apply block w-16 h-1 bg-[#2ba283] mx-auto mt-4 rounded;
  }
  
  /* Content styles */
  .content {
    @apply text-lg leading-relaxed max-w-none;
  }
  
  .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    @apply text-gray-900 font-bold mt-8 mb-4;
  }
  
  .content p {
    @apply text-gray-700 leading-relaxed mb-6;
  }
  
  .content a {
    @apply text-[#2ba283] no-underline hover:underline;
  }
  
  .content strong {
    @apply text-gray-900 font-bold;
  }
  
  .content blockquote {
    @apply border-l-4 border-[#2ba283] bg-gray-50 p-6 my-6 not-italic;
  }
  
  /* Badge styles */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
  }
  
  .badge-green {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-blue {
    @apply bg-blue-100 text-blue-800;
  }
  
  .badge-purple {
    @apply bg-purple-100 text-purple-800;
  }
  
  /* Navigation styles */
  .nav-link {
    @apply text-gray-700 hover:text-[#2ba283] font-medium transition-colors duration-200;
  }
  
  .nav-link.active {
    @apply text-[#2ba283];
  }
  
  /* Gradient backgrounds */
  .gradient-hero {
    background: linear-gradient(135deg, #2ba283 0%, #059669 100%);
  }
  
  .gradient-card {
    background: linear-gradient(135deg, rgba(43, 162, 131, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
  }
  
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  /* Form styles */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#2ba283] focus:border-[#2ba283] outline-none transition-colors;
  }
  
  /* Rating stars */
  .stars {
    @apply flex items-center space-x-1;
  }
  
  .star {
    @apply text-yellow-400 text-lg;
  }
  
  /* Responsive utilities */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Social icons */
  .social-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center transition-colors duration-200;
  }
  
  .social-icon:hover {
    @apply bg-[#2ba283] text-white;
  }
}

/* Custom Utilities */
@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, #2ba283 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .shadow-custom {
    box-shadow: 0 10px 25px -3px rgba(43, 162, 131, 0.1), 0 4px 6px -2px rgba(43, 162, 131, 0.05);
  }
  
  .border-gradient {
    border-image: linear-gradient(135deg, #2ba283, #059669) 1;
  }
  
  /* Custom scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #2ba283;
    border-radius: 4px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #238a6b;
  }
  
  /* Print styles */
  @media print {
    .no-print {
      display: none !important;
    }
  }
}