*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Hanken Grotesk', sans-serif;
  background-color: hsl(var(--bg));
  color: hsl(var(--text));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Syne', sans-serif;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-family: inherit;
  font-size: 1rem;
}
.btn-primary {
  background: hsl(var(--primary));
  color: white;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  filter: brightness(1.2);
}
.btn-outline {
  background: transparent;
  border: 1px solid hsla(var(--primary), 0.2);
  color: hsl(var(--primary));
}
.btn-outline:hover {
  background: hsla(var(--primary), 0.05);
}
.btn-accent {
  background: hsl(var(--accent));
  color: hsl(var(--primary));
}