:root {
  --color-sage: #5B8C6B;
  --color-charcoal: #2C3E50;
  --color-cream: #F5F1E8;
  --color-white: #FAFAF8;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  margin: 0;
}

h1, h2, h3, .font-heading {
  font-family: 'Outfit', sans-serif;
}

.bg-cream {
  background-color: var(--color-cream);
}

.text-sage {
  color: var(--color-sage);
}

.btn-primary {
  background-color: var(--color-sage);
  color: white;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background-color: #4A7356;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(91, 140, 107, 0.3);
}

.serene-shadow {
  box-shadow: 0 4px 24px rgba(44, 62, 80, 0.04);
}

.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-sage);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}