:root {
    --color-bg-light: #f4f6f1;
    --color-bg-mid: #acbaa9;
    --color-text-dark: #787878;
    --color-accent-dark: #646D62;
}

/* Custom font */
.font-names {
    font-family: 'Pinyon Script', cursive;
}
.font-main {
    font-family: 'Playfair Display', serif;
}

.bg-cream { background-color: var(--color-bg-light); }
.bg-sage { background-color: var(--color-bg-mid); }
.text-dark-gray { color: var(--color-text-dark); }
.text-dark-green { color: var(--color-accent-dark); }
.border-dark-green { border-color: var(--color-accent-dark); }

/* Gradient */
.home-gradient {
    background: linear-gradient(
        180deg, 
        var(--color-bg-light) 70%, /* Start near the background color */
        var(--color-bg-mid) 100% /* Blend into the next section's color */
    );
}

/* Mobile menu overlay style */
.menu-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Fade up animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  animation: fadeUp 1s ease-out forwards;
}