@import url("../shared/template-base.css");

:root {
  --color-bg: #f5fbf4;
  --color-bg-soft: #e7f4e5;
  --color-card: rgba(255, 255, 255, 0.78);
  --color-text: #152416;
  --color-muted: #61715f;
  --color-primary: #5dbb63;
  --color-secondary: #f3b85b;
  --color-border: rgba(21, 36, 22, 0.12);
  --hero-image: url("https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=1800&q=80");
}

.site-header {
  background: rgba(245, 251, 244, 0.78);
}

.site-header.is-scrolled {
  background: rgba(245, 251, 244, 0.94);
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(245, 251, 244, 0.9), rgba(245, 251, 244, 0.28)),
    var(--hero-image) center/cover no-repeat;
}