/* Source file for Tailwind CSS - This file is processed to generate main.css */
/* DO NOT link this file directly in HTML - use the generated main.css instead */

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

/* Custom CSS Variables */
:root {
  /* Primary Colors */
  --color-primary: #1C4ED8; /* blue-700 */
  --color-secondary: #1e40af; /* blue-800 */
  --color-accent: #3b82f6; /* blue-500 */
  
  /* Background Colors */
  --color-background: #FFFFFF; /* white */
  --color-surface: #F7F7F8; /* gray-50 */
  
  /* Text Colors */
  --color-text-primary: #1F2937; /* gray-800 */
  --color-text-secondary: #6B7280; /* gray-500 */
  
  /* Status Colors */
  --color-success: #1C4ED8; /* blue-700 */
  --color-warning: #F59E0B; /* amber-500 */
  --color-error: #DC2626; /* red-600 */
  
  /* Border Colors */
  --color-border: #E5E7EB; /* gray-200 */
  
  /* Shadow Colors */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@layer base {
  body {
    font-family: 'Poppins', 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: 600;
    color: var(--color-text-primary);
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white font-semibold px-6 py-3 rounded-lg transition-all duration-250 ease-in-out hover:bg-primary-dark focus:ring-4 focus:ring-primary/20;
    box-shadow: var(--shadow-sm);
  }
  
  .btn-secondary {
    @apply bg-secondary text-white font-semibold px-6 py-3 rounded-lg transition-all duration-250 ease-in-out hover:bg-secondary-dark focus:ring-4 focus:ring-secondary/20;
    box-shadow: var(--shadow-sm);
  }
  
  .card {
    @apply bg-white rounded-lg border border-gray-200 p-6;
    box-shadow: var(--shadow-md);
  }
  
  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }
  
  .container-max {
    @apply max-w-7xl mx-auto;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
  
  .metric-highlight {
    @apply text-accent font-semibold;
  }
  
  .form-input {
    @apply w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-4 focus:ring-primary/20 focus:border-primary transition-all duration-250 ease-in-out;
  }
  
  .testimonial-card {
    @apply bg-surface rounded-lg p-6 border border-gray-200;
  }
  
  .cta-urgency {
    @apply bg-warning text-white px-3 py-1 rounded-full text-sm font-medium;
  }
  
  .success-badge {
    @apply bg-success text-white px-3 py-1 rounded-full text-sm font-medium;
  }
  
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300 ease-in-out;
  }
  
  .modal-content {
    @apply bg-white rounded-lg p-8 max-w-md w-full mx-4 transform transition-all duration-300 ease-in-out;
  }
}

@layer utilities {
  .transition-250 {
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
  }
  
  .transition-300 {
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .shadow-cta {
    box-shadow: var(--shadow-sm);
  }
  
  .shadow-card {
    box-shadow: var(--shadow-md);
  }
  
  .text-balance {
    text-wrap: balance;
  }
}