/* Palette (from link): Dust Grey #DAD7CD, Dry Sage #A3B18A, Fern #588157, Hunter Green #3A5A40, Pine Teal #344E41 */

:root{
  --dust: #DAD7CD;
  --sage: #A3B18A;
  --fern: #588157;
  --hunter: #3A5A40;
  --pine: #344E41;
  --text: #2b2b2b;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: #fafafa;
  padding-top: 70px;
}

/* Navbar */
#mainNav{
  background: linear-gradient(90deg,var(--dust),#fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.navbar-brand{ font-weight:700; color:var(--pine) !important; }

/* Hero */
.hero{
  background: linear-gradient(180deg, rgba(52,78,65,0.06), rgba(255,255,255,0.0));
  padding: 80px 0 40px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.hero h1{ color:var(--pine); font-weight:800; }

/* Cards and sections */
.card{ border: none; border-radius:12px; background: #fff; box-shadow: 0 6px 20px rgba(100,100,100,0.04); }

/* Program icons */
.program .icon{
  width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:22px; color:white; margin-bottom:8px;
}

/* Swatch */
.palette-swatch .swatch{
  width:36px; height:36px; border-radius:6px; box-shadow: 0 3px 8px rgba(0,0,0,0.07);
}

/* Buttons */
.btn-primary{
background: var(--pine); border-color: var(--pine); }
.btn-primary:hover{ background: var(--hunter); border-color: var(--hunter); }
.btn-outline-light{ color:var(--pine); border-color:var(--pine); }

/* Donate/Volunteer */
.donate-btn{ background: var(--fern); border-color: var(--fern); color: #fff; }
.volunteer-btn{ background: var(--sage); border-color: var(--sage); color: #fff; }

/* Responsive tweaks */
@media (max-width: 767px) {
  .hero{ padding: 60px 0; }
  .palette-img{ max-width: 90px; }
}

/* Accessibility: focus states */
a:focus, button:focus, input:focus, textarea:focus{ outline: 3px solid rgba(88,129,87,0.18); outline-offset: 2px; }

/* small utility */
.small{ font-size: .9rem; }