.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-small);
  text-decoration:none;
  border-radius:var(--radius-pill);
  padding:0.875rem 1.75rem;
  border:2px solid transparent;
  transition:background .3s var(--ease-out), color .3s, border-color .3s, transform .2s;
  line-height:1
}
.btn--primary{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary)
}
.btn--primary:hover{
  background:#000;
  border-color:#000;
  transform:translateY(-2px)
}
.btn--secondary{
  background:transparent;
  color:var(--color-primary);
  border-color:var(--color-primary)
}
.btn--secondary:hover{
  background:var(--color-primary);
  color:#fff
}
.btn--accent{
  background:var(--color-accent);
  color:#fff;
  border-color:var(--color-accent)
}
.btn--accent:hover{
  background:#e04d35;
  border-color:#e04d35;
  transform:translateY(-2px)
}
.btn--ghost{
  background:transparent;
  color:var(--color-text);
  border-color:var(--color-border)
}
.btn--ghost:hover{
  border-color:var(--color-primary);
  color:var(--color-primary)
}
.btn--light{
  background:#fff;
  color:var(--color-primary);
  border-color:#fff
}
.btn--light:hover{
  background:var(--color-surface);
  border-color:var(--color-surface);
  color:var(--color-primary)
}
.btn--sm{
  padding:.65rem 1.2rem;
  font-size:var(--fs-caption)
}
@media(max-width:480px){
  .btn{width:100%;justify-content:center}
}