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

:root {
  --color-bg: #fbf7f0;
  --color-bg-soft: #efe7dc;
  --color-card: rgba(255, 255, 255, 0.78);
  --color-text: #1e1712;
  --color-muted: #7c6b60;
  --color-primary: #ff6b6b;
  --color-secondary: #3d5afe;
  --color-border: rgba(30, 23, 18, 0.12);
  --hero-image: url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1800&q=80");
}

.site-header {
  background: rgba(251, 247, 240, 0.78);
}

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

.hero::before {
  background:
    linear-gradient(90deg, rgba(251, 247, 240, 0.92), rgba(251, 247, 240, 0.42)),
    var(--hero-image) center/cover no-repeat;
}