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

:root {
  /* Primary Colors - WhatsApp Business Authority */
  --color-primary: #25D366; /* whatsapp-green */
  --color-primary-dark: #128C7E; /* whatsapp-green-dark */
  
  /* Accent Colors */
  --color-accent: #FF6B35; /* urgency-orange */
  
  /* Background Colors */
  --color-background: #FFFFFF; /* white */
  --color-surface: #F7FAFC; /* gray-50 */
  
  /* Text Colors */
  --color-text-primary: #2D3748; /* gray-800 */
  --color-text-secondary: #4A5568; /* gray-600 */
  
  /* Status Colors */
  --color-success: #38A169; /* green-500 */
  --color-warning: #ED8936; /* orange-400 */
  --color-error: #E53E3E; /* red-500 */
  
  /* Border Colors */
  --color-border: #E2E8F0; /* gray-200 */
}

@layer base {
  body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-primary);
    background-color: var(--color-background);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white font-poppins font-semibold px-6 py-3 rounded-lg;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-primary-dark hover:-translate-y-0.5;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15);
  }
  
  .btn-secondary {
    @apply bg-transparent border border-primary text-primary font-poppins font-semibold px-6 py-3 rounded-lg;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-primary hover:text-white hover:-translate-y-0.5;
  }
  
  .card {
    @apply bg-white rounded-lg border border-gray-200 p-6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .testimonial-card {
    @apply bg-white rounded-lg border border-gray-200 p-6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    @apply transition-all duration-300 ease-in-out;
  }
  
  .form-input {
    @apply w-full px-4 py-3 border border-gray-200 rounded-lg;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
    @apply transition-all duration-200 ease-in-out;
  }
  
  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }
  
  .container-max {
    @apply max-w-7xl mx-auto;
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .shadow-cta {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15);
  }
  
  .shadow-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .animate-fade-in {
    animation: fadeIn 300ms ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}