:root {
  --primary-color: #5F6F52;
  --secondary-color: #4A5A3F;
  --accent-color: #A9B388;
  --light-color: #FEFAE0;
  --dark-color: #2D3428;
  --gradient-primary: linear-gradient(135deg, #5F6F52 0%, #4A5A3F 100%);
  --hover-color: #4A5A3F;
  --background-color: #FFFFFF;
  --text-color: #495057;
  --border-color: rgba(169, 179, 136, 0.2);
  --divider-color: rgba(95, 111, 82, 0.1);
  --shadow-color: rgba(95, 111, 82, 0.1);
  --highlight-color: #FF7F50;
  --warm-color: #B99470;
  --main-font: 'Merriweather', serif;
  --alt-font: 'Poppins', sans-serif;
}

/* Mobile Navigation */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  padding: 10px;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: var(--primary-color);
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

/* Background Pattern */
.hero-pattern {
  background-image:
    radial-gradient(circle at 40% 25%, rgba(169, 179, 136, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 75% 65%, rgba(185, 148, 112, 0.15) 0%, transparent 35%),
    radial-gradient(circle at 20% 75%, rgba(255, 127, 80, 0.1) 0%, transparent 25%);
  background-size: 280px 280px, 220px 220px, 160px 160px;
  background-position: 0 0, 120px 80px, 200px 150px;
}

@media screen and (max-width: 768px) {
  .nav-toggle-label {
    display: block;
  }

  .navigation {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--background-color);
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    box-shadow: 0 2px 10px var(--shadow-color);
  }

  .navigation ul {
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .navigation li {
    margin: 0;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
  }

  .navigation a {
    display: block;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--divider-color);
  }

  .nav-toggle:checked~.navigation {
    transform: scale(1, 1);
  }

  .nav-toggle:checked~.navigation li {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
  }

  .logo {
    text-align: center !important;
    margin: 0 auto;
  }

  /* Mobile Footer */
  .footer-content {
    flex-direction: column !important;
    text-align: center !important;
  }

  .footer-nav {
    margin-top: 20px;
    order: 2;
  }

  .footer-nav ul {
    flex-direction: column !important;
    gap: 10px !important;
  }
}