@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Source+Sans+Pro:wght@400;500;600&family=Crimson+Text:wght@400;600&display=swap');

:root {
  --color-primary: #2d5a4a;
  --color-primary-50: #f0f5f3;
  --color-primary-100: #d9e7e2;
  --color-primary-200: #b3cfc5;
  --color-primary-400: #679f8b;
  --color-secondary: #4a7c7e;
  --color-secondary-50: #f1f6f6;
  --color-secondary-100: #d7e8e9;
  --color-accent: #e07a5f;
  --color-accent-100: #f9e5e0;
  --color-accent-600: #b3624c;
  --color-success: #6b8e23;
  --color-warning: #d2691e;
  --color-background: #fefefe;
  --color-surface: #f8faf9;
  --color-border: #e8f0ef;
  --color-text-primary: #1a2e2a;
  --color-text-secondary: #5a6b68;
  --shadow-primary: rgba(45, 90, 74, 0.15);
  --shadow-secondary: rgba(45, 90, 74, 0.08);
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

.font-poppins { font-family: 'Poppins', sans-serif; }
.font-source-sans { font-family: 'Source Sans Pro', sans-serif; }
.font-crimson { font-family: 'Crimson Text', serif; }

.bg-background { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-secondary-50 { background-color: var(--color-secondary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-100 { background-color: var(--color-secondary-100); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-100 { background-color: var(--color-accent-100); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-text-primary { color: var(--color-text-primary); }
.text-text-secondary { color: var(--color-text-secondary); }

.text-section-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.text-card-title {
  font-size: 1.25rem;
  line-height: 1.35;
}

.text-body-large {
  font-size: 1.125rem;
  line-height: 1.7;
}

.text-hero {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.1;
}

.shadow-gentle { box-shadow: 0 2px 8px var(--shadow-secondary); }
.shadow-testimonial { box-shadow: 0 4px 20px var(--shadow-secondary); }
.shadow-cta { box-shadow: 0 8px 24px var(--shadow-primary); }
.shadow-cta-hover { box-shadow: 0 10px 28px var(--shadow-primary); }

/* Tailwind-like gradient stop utilities for CTA section */
.from-primary {
  --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(45 90 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-50 {
  --tw-gradient-from: var(--color-primary-50) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 245 243 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-secondary {
  --tw-gradient-to: var(--color-secondary) var(--tw-gradient-to-position);
}

.to-secondary-50 {
  --tw-gradient-to: var(--color-secondary-50) var(--tw-gradient-to-position);
}

/* Tailwind-like hover utility used by CTA button */
.hover\:bg-accent-600:hover {
  background-color: var(--color-accent-600);
}

.hover\:bg-primary:hover {
  background-color: var(--color-primary);
}

.hover\:text-white:hover {
  color: #fff;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px var(--shadow-primary);
}

.btn-primary:hover {
  background-color: var(--color-accent-600);
  transform: translateY(-1px);
}

.form-field {
  border: 1px solid var(--color-border);
  background: #fff;
  transition: all 0.25s ease;
}

.form-field:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(103, 159, 139, 0.2);
}

@media (min-width: 768px) and (max-width: 1199px) {
  .text-section-title {
    font-size: clamp(1.85rem, 3vw, 2.2rem);
  }

  #problems .overflow-hidden,
  #testimonials .overflow-hidden {
    margin-left: 2.5rem !important;
    margin-right: 2.5rem !important;
  }

  #problems #prevButton,
  #testimonials #testimonialPrev {
    left: 0.25rem !important;
  }

  #problems #nextButton,
  #testimonials #testimonialNext {
    right: 0.25rem !important;
  }

  #contact .grid {
    gap: 2rem !important;
  }
}