.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.button--primary {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
  font-weight: 600;
}

.button--ghost {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.button--danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--text);
  font-weight: 600;
}