:root {
  --bg: #f8faf9; /* nästan vit med grön ton */
  --primary: #3d6151; /* skogsgrön */
  --secondary: #8aa9a1; /* dämpad blågrön */
  --accent: #e7e3da; /* sandton */
  --text: #1e1e1e; /* mörk text */
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
}
.font-heading {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Ubuntu, Cantarell, Noto Sans, sans-serif;
}
.font-body {
  font-family: Lato, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Ubuntu, Cantarell, Noto Sans, sans-serif;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.05);
}
.bg-grid {
  background-image: radial-gradient(
    rgba(61, 97, 81, 0.08) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: all 300ms;
}

dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.4); /* bg-black/40 */
  -webkit-backdrop-filter: blur(5px); /* blur-md ≈ 12px in Tailwind */
  backdrop-filter: blur(5px);
}